JSON URL Fetch and data filtering

1

This code does a great job of fetching and rendering everything within the JSON array, but what if I am interested in only listing the objects with a particular key-value (like gender)?

Since I’m not filtering during the fetch, what statement would I need to add in between the ‘const getListOfNames’ and ‘return’ statements to output the data I want?

const URL = "https://ghibliapi.herokuapp.com/people";

const main = document.getElementById("main");
main.innerHTML = "<p>Loading...";

fetch(URL).then((response) => response.json()).then((people) => main.innerHTML = getListOfNames(people));

const getListOfNames = (people) => {
  const names = people.map((person) => `<li>${person.name} - ${person.gender} </li>`).join("\n");

  return `<ul>${names}</ul>`;
};
2

add .filter(person => person.gender === 'cheese') after your .map

( might need to edit that :slight_smile: )

1 Like
3

Whaaaaa… BRILLIANT, Mr. Chuck! :smiley: :smiley: :smiley:

Okay, so that worked perfect when I added your code (and removed the cheese) above the .map statement. Adding it after the .map just kept the page in “Loading…”

Thanks, for all your help!