Estou empacado em uma situação onde eu não consigo transformar os blocos de dados do arquivo JSON em HTML, não aparece nada. Abaixo colocarei os códigos para vocês darem uma olhada
OBS: Se puderem me indicar um site legal sobre JSON também preciso saber sobre filtrar e adicionar posts, pois cada bloco JSON é um.
UPDATE DO PROBLEMA
Pessoal fiz abaixo os updates da resolução que tive para mostrar o conteúdo JSON no HTML, agora só falta o fazer o filtro que tem que ser a partir de dados como popularidade, Data e comentário, vou seguir a ajuda do amigo e se conseguir faço mais um update por aqui!!
Código HTML(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>
<script type="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>
CÓDIGO DO FILTRO EM JAVASCRIPT(funcionando)
<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>
Arquivo JSON(UPDATE)
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;
});
}
postRow
. Tens aspas simples onde deverias ter aspas duplas, não tem o;
no fim. Isso tudo gera erros e por isso não é renderizado nada.