如何在Javascript中按值排序或过滤JSON数据

Question

So I finally got star wars API to display the names of each character from the "people" object this JSON array taken from https://swapi.co/api/people/ in Vanilla Javascript. I need to, however, sort or filter the data results based on the specific value which is https://swapi.co/api/species/1/ the current code I have, when I run it displays the table with the names of all species of people, I only need the human species. Here is my code:

 const url = 'https://swapi.co/api/species/1/?format=json'; function fetchData(url) { return fetch(url).then((resp) => resp.json()); } function constructTableRow(data) { const row = document.createElement('tr'); const { name, height, mass, hair_color } = data; row.appendChild(constructElement('td', name)) row.appendChild(constructElement('td', height)) row.appendChild(constructElement('td', mass)) row.appendChild(constructElement('td', hair_color)) return row; } function constructElement(tagName, text, cssClasses) { const el = document.createElement(tagName); const content = document.createTextNode(text); el.appendChild(content); if (cssClasses) { el.classList.add(...cssClasses); } return el; } const swTable = document.getElementById('sw-table').getElementsByTagName('tbody')[0]; fetchData('https://swapi.co/api/people/').then((data) => { data.results.forEach(result => { const row = constructTableRow(result); swTable.appendChild(row); }); }); 

 <table id=sw-table><tbody></tbody></table> 

The JSON endpoint come from https://swapi.co/api/people/

How do I get the table to only display the data for only the human species?

Answer 1

那使用filter呢？

const humansOnly = result.filter(p => p.species.indexOf('https://swapi.co/api/species/1/') !== -1);

Answer 2

Well, you know that https://swapi.co/api/species/1/ is human, so you can just check to see if that url exists in the species array using filter .

const isHuman = guy=>~guy.species.indexOf('https://swapi.co/api/species/1/');

You can use indexOf to determine an element exists in an array. It returns negative one if it does not exist, so using bitwise NOT (~) makes it truthy if it exist and falsey if it doesn't by turning a -1 into a zero.

Then you can filter your results on that function before looping them..

data.results.filter(isHuman).forEach(result => {....});

 const url = 'https://swapi.co/api/species/1/?format=json'; function fetchData(url) { return fetch(url).then((resp) => resp.json()); } function constructTableRow(data) { const row = document.createElement('tr'); const { name, height, mass, hair_color } = data; row.appendChild(constructElement('td', name)) row.appendChild(constructElement('td', height)) row.appendChild(constructElement('td', mass)) row.appendChild(constructElement('td', hair_color)) return row; } function constructElement(tagName, text, cssClasses) { const el = document.createElement(tagName); const content = document.createTextNode(text); el.appendChild(content); if (cssClasses) { el.classList.add(...cssClasses); } return el; } const swTable = document.getElementById('sw-table').getElementsByTagName('tbody')[0]; const isHuman = guy=>~guy.species.indexOf('https://swapi.co/api/species/1/'); fetchData('https://swapi.co/api/people/').then((data) => { data.results.filter(isHuman).forEach(result => { const row = constructTableRow(result); swTable.appendChild(row); }); }); 

 <table id=sw-table><tbody></tbody></table> 

Answer 3

The JSON returned by the species API includes a people array. So instead of filtering people , loop over the people array.

However, this could cause a problem due to the SWAPI rate limiting .

 const url = 'https://swapi.co/api/species/1/?format=json'; function fetchData(url) { return fetch(url).then((resp) => resp.json()); } function constructTableRow(data) { const row = document.createElement('tr'); const { name, height, mass, hair_color } = data; row.appendChild(constructElement('td', name)) row.appendChild(constructElement('td', height)) row.appendChild(constructElement('td', mass)) row.appendChild(constructElement('td', hair_color)) return row; } function constructElement(tagName, text, cssClasses) { const el = document.createElement(tagName); const content = document.createTextNode(text); el.appendChild(content); if (cssClasses) { el.classList.add(...cssClasses); } return el; } const swTable = document.getElementById('sw-table').getElementsByTagName('tbody')[0]; fetchData(url).then(data => data.people.forEach(personUrl => fetchData(personUrl).then(result => { const row = constructTableRow(result); swTable.appendChild(row); }) ) ); 

 <table id=sw-table> <tbody></tbody> </table> 

Answer 4

And another example using .filter() and .includes() (in place of detecting an negative index):

fetchData('https://swapi.co/api/people/').then(data => {
    data.results
        .filter(person => person.species.includes("https://swapi.co/api/species/1/"))))
        .forEach(human => swTable.appendChild(constructTableRow(human)))
});

Answer 5

does this work?

    fetchData('https://swapi.co/api/people/').then((data) => {

       data.results.forEach(result => {
       const row = constructTableRow(result);
       if(result.species === "https://swapi.co/api/species/1/") {
           swTable.appendChild(row);
        }
   });