Display data from a Json file in HTML

0

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;

});
}
    
asked by anonymous 08.03.2018 / 19:04

2 answers

1

See that it is a very simple example that can be used in several ways ...

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><tableborder="1">
  <thead>
    <tr>
      <th>Author</th>
      <th>Title</th>
      <th>Url</th>
      <th>Upvotes</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>
    
08.03.2018 / 19:19
-1

To filter the data you can use 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
    }
}

To register 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

Read more about arrays

    
08.03.2018 / 19:33