How to display data on a specific parameter JSON

Question

There is a site with api. With the help of the code below, I get the data and bring it to the site. How to make that only data that has a logo parameter is displayed?

fetch(url)
    .then(function(response){
        return response.json();
    })
    .then(function(result){
        let inner = '';
        result.data.forEach(e => {
            let name = e.name,
            releaseDate = e.year,
            projects = e.projectsCount,
            docs = e.docs,
            logo = e.logo;
            inner += `<div class="col-4">
            <img src=${logo} alt="logo">
            <p><b>${name}</b></p>
            <p>Release ${releaseDate}</p>
            <p>${projects} projects GitHub</p>
            <a href=${docs} alt="docs">Docs</a>
            </div>`;
         info.innerHTML = inner;
            });
        });

score 0 · Accepted Answer · answered Jul 25 '19 at 13:53

You have to filter your object's response, so I've added another then statement to do this. This is the result:

fetch(url)
  .then(function(response) {
    return response.json();
  })
  .then(function(result) {
    return result.data.filter(d => d.hasOwnProperty('logo'));
  }).then(function(result) {

    let inner = '';
    result.forEach(e => {
      let name = e.name,
        releaseDate = e.year,
        projects = e.projectsCount,
        docs = e.docs,
        logo = e.logo;
      inner += `<div class="col-4">
            <img src=${logo} alt="logo">
            <p><b>${name}</b></p>
            <p>Release ${releaseDate}</p>
            <p>${projects} projects GitHub</p>
            <a href=${docs} alt="docs">Docs</a>
            </div>`;

      info.innerHTML = inner;
    });
  });

Joseph · Answer 2 · 2019-07-25T14:17:12.350

you can filter data with logo and loop over it

fetch(url)
    .then(function(response){
        return response.json();
    })
    .then(function({ data = [] } = {}){
        let inner = '';
        data.filter(d => d.logo).forEach((e) => {
          let inner = '';
          let name = e.name,
            releaseDate = e.year,
            projects = e.projectsCount,
            docs = e.docs,
            logo = e.logo;
            inner += `<div class="col-4">
            <img src=${logo} alt="logo">
            <p><b>${name}</b></p>
            <p>Release ${releaseDate}</p>
            <p>${projects} projects GitHub</p>
            <a href=${docs} alt="docs">Docs</a>
            </div>`;
            info.innerHTML = inner;
        })
    });

How to display data on a specific parameter JSON

2 Answers2