0

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;

});
}
10
  • Brother, qual a sua dúvida sobre Json? JSON é um array de objetos. Se você der um console.log na variável data o verá em seu estado original e aí poderá percorrê-lo sem dificuldade. Commented 8/03/2018 às 18:07
  • Assim é por que eu estou aprendendo JSON, e me deram isso pra fazer, eu pesquisei em tudo quando é lugar pra ver exemplos e o único que deu certo foi um com tabela, mas quando eu tento reproduzir o mesmo com HTML não dá certo, desculpa a nubisse!!
    – user4451
    Commented 8/03/2018 às 18:10
  • imagina... Olha, primeiro entenda o seguinte. JSON é um formato. Ou seja, uma forma de armazenar dados. Poderia ser por exemplo o XML. Sabendo disso, vou tentar jogar um exemplo aqui de Json como resposta e você adapta o seu blz? Commented 8/03/2018 às 18:12
  • blz, vlw mesmo, pois estou perdidão heheh
    – user4451
    Commented 8/03/2018 às 18:16
  • O problema está na atribuição do valor a variável 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. Commented 8/03/2018 às 18:17

2 Respostas 2

2

Veja que é um exemplo bem simples e que pode ser utilizado de diversas formas...

var json = {
   person: [
   {
  "author": "Nobtaka Nukui",
  "title": "Want people to use your product? Use it yourself",
  "url": "http://www.medium.com",
  "category": "Product Design",
  "comments": 4,
  "created_at": 1460030400,
  "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_ui",
  "comments": 7,
  "created_at": 1459857600,
  "upvotes": 9
},
{
  "author": "Mikael Greif",
  "title": "What do you do with a failed project?",
  "url": "http://www.mika.el",
  "category": "discussion",
  "comments": 2,
  "created_at": 1460203200,
  "upvotes": 4
},
{
  "author": "Kenny Schrub",
  "title": "Some things can't be prototyped",
  "url": "http://www.mika.el",
  "category": "discussion",
  "comments": 25,
  "created_at": 1460203200,
  "isOwner": true,
  "upvotes": 4
},
{
  "author": "Jacky Mao",
  "title": "How to prototype without any tools",
  "url": "http://www.jackymao.wix",
  "category": "product_design",
  "comments": 0,
  "upvotes": 1
},
{
  "author": "Christopher Alesund",
  "title": "Case study: Redesigning the Folyo landing page",
  "url": "http://www.medium.com",
  "category": "case_study",
  "comments": 0,
  "created_at": 1460289600,
  "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,
  "created_at": 1460376000,
  "isOwner": true,
  "upvotes": 2
  }
 ]
};

//console.log(json);
for(var i=0;i< json.person.length; i++){
  var html = "<tr>";
  html +="<td>"+json.person[i].author+"</td>";
  html +="<td>"+json.person[i].title+"</td>";
  html +="<td>"+json.person[i].url+"</td>";
  html +="<td>"+json.person[i].upvotes+"</td>";
  html +="</tr>";
  $('table tbody').append(html);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
  <thead>
    <tr>
      <th>Author</th>
      <th>Title</th>
      <th>Url</th>
      <th>Upvotes</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

4
  • vlw vou tentar aqui
    – user4451
    Commented 8/03/2018 às 18:21
  • Se realmente ajudar, marca como resposta valeu? Abraços e boa sorte! Commented 8/03/2018 às 18:22
  • aliás fazendo isso não precisa do javascript?
    – user4451
    Commented 8/03/2018 às 18:22
  • Sim, precisa! Inclusive, é ele que ta pegando as informações do Json e jogando no HTML Commented 8/03/2018 às 18:30
-1

Para filtrar os dados você pode usar search:

//Sintaxe:
var teste = 'exemplo'
teste.search('ex') //Retorna 0 que é a posição da primeira ocorrência do filtro
teste.search('Ex') //Retorna -1, ou seja, não foi encontrado
teste.search(/Ex/i) //Exemplo de busca com case-insensitive, retorna 0 

//No JSON, para buscar os autores que tenham a letra y ou Y:
for(var i = 0; i < json.person.length; i++) {
    if(json.person[i].author.search(/y/i) != -1) {
        //Mostra os dados
    }
}

Para cadastrar use push:

//Sintaxe
var exemplo = [1, 2, 3]
exemplo.push(4)
console.log(exemplo) //Retorna [1, 2, 3, 4]

//Você pode usar push para adicionar objetos no JSON
json.person.push({
    author: 'nome exemplo',
    title: 'exemplo de titulp',
    url: 'https://google.com',
    category: 'minha categoria',
    comments: 0,
    created_at: 1460030400,
    upvotes: 0
})
//push() retorna o índice do cadastro, no caso 8

Leia mais sobre arrays

16
  • vlw mano vou dar uma estudada
    – user4451
    Commented 8/03/2018 às 18:44
  • 1
    A resposta não ajuda a responder a pergunta. O mais indicado é colocar em um comentário, mesmo assim não sei em que ajudaria. Commented 8/03/2018 às 18:45
  • @FilipeMoraes Que resposta, minha ou do Guilherme?
    – user4451
    Commented 8/03/2018 às 18:54
  • @user4451 O seu foi um comentário, por tanto estou a falar do resposta do Guilherme. Commented 8/03/2018 às 19:06
  • 1
    @rLinhares concordo com isso apesar de achar difícil a w3s mudar seus links, por isso editei a pergunta com um exemplo
    – Costamilam
    Commented 8/03/2018 às 20:00

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .