I'm stuck in a situation where I can not turn the data blocks of the JSON file into HTML, nothing appears. Below I'll put the codes for you to take a look at
If you can tell me a cool site about JSON I also need to know about filtering and adding posts, as each JSON block is one.
PROBLEM UPDATE
Personal I've done below the updates of the resolution I had to show the JSON content in HTML, now I just need to do the filter that has to be from data like popularity, Date and comment, I will follow the friend's help and if I can do one more update here !!
HTML code (UPDATE)
<!DOCTYPE html>
<html lang="pt-br">
<head>
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script><scripttype="text/javascript" src="dados.json"> </script>
</head>
<body>
<header><input id="filtro" type="text" placeholder="Busca Rápida"></header>
<main id= "dados" ></main>
<footer></footer>
</body>
</html>
JAVASCRIPT FILTER CODE (working)
<script>
$('#filtro').keyup(function () {
var yourtext = $(this).val();
if (yourtext.length > 0) {
var abc = $("section").filter(function () {
var str = $(this).text();
var re = new RegExp(yourtext, "i");
var result = re.test(str);
if (!result) {
return $(this);
}
}).hide();
} else {
$("section").show();
}
});
</script>
JSON (UPDATE) file
window.onload=function(){
data = { person: [
{
author: 'Nobtaka Nukui',
title: 'Want people to use your product? Use it yourself',
url: 'http://www.medium.com',
category: 'Product Design',
comments: '4 coments',
created_at: '43 minutos atrás',
classcor: 'corUm',
foto: '<img src="img/ft-3.jpg" width="18" height="18" alt="Personagem1">',
upvotes: 11 },
{
author: "Danil Ishutin",
title: "Font Size Idea: px at Root, rem for Components, em for Text Elements",
url: "http://www.css-tricks.com",
category: "UX Theory",
comments: '7 coments',
created_at: '5 minutos atrás',
classcor: 'corDois',
foto: '<img src="img/ft-2.jpg" width="18" height="18" alt="Personagem2">',
upvotes: 9},
{
author: "Kenny Schrub",
title: "Some things cant be prototyped",
url: "http://www.mika.el",
category: "Opinion",
comments:'25 coments',
created_at: '7 minutos atrás',
classcor: 'corTres',
foto: '<img src="img/ft-2.jpg" width="18" height="18" alt="Personagem2">',
isOwner: true,
upvotes: 4
},
{
author: "Jacky Mao",
title: "How to prototype without any tools",
url: "http://www.jackymao.wix",
category: "Opinion",
comments: '0 coments',
classcor: 'corTres',
foto: '<img src="img/ft-1.jpg" width="18" height="18" alt="Personagem2">',
upvotes: 4
},
{
author: "Christopher Alesund",
title: "Case study: Redesigning the Folyo landing page",
url: "http://www.medium.com",
category: "Case Study",
comments: '0 coments',
classcor: 'corQuatro',
foto: '<img src="img/ft-1.jpg" width="18" height="18" alt="Personagem2">',
created_at: '7 hours ago',
upvotes: 3
},
{
author: "Pasha Biceps",
title: "Don't let bad process or structure kill great interfaces",
url: "http://www.medium.com",
category: 'Product Design',
comments: '0 coments',
classcor: 'corUm',
foto: '<img src="img/ft-3.jpg" width="18" height="18" alt="Personagem2">',
created_at: '2 days ago',
isOwner: true,
upvotes: 2
}
]};
data.person.forEach(function(p){
var post = "<section><span><a href='#'></a>"+p.upvotes+"</span><div><a href="+p.url+">"+p.url+"</a><h1>"+p.title+"</h1><nav><a href='#' id='bt-category' class="+ p.classcor +" title="+ p.category +">"+p.category+"</a><p>"+p.foto+"<a href='#' title="+p.author+">"+p.author+"</a>"+p.created_at+"<a href='#' class='coments'>"+p.comments+"</a></p></nav></div></section>";
document.querySelector('#dados').innerHTML += post;
});
}