If I only want to list the objects with a particular key-value (like gender) from the JSON array fetched and rendered by this code, where should that filtering process occur - during the fetch or the render?
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 = getListOfGender(people));
const getListOfGender = (people) => {
const filteredPeople = people.filter(person => person.gender === 'female'); // Adjust 'female' as needed
const names = filteredPeople.map((person) => `<li>${person.name} - ${person.gender} </li>`).join("\n");
return `<ul>${names}</ul>`;
};