Question

所以我终于得到星球大战API来显示来自＆＃34;人物＆＃34;的每个角色的名字。对象这个JSON数组来自Vanilla Javascript中的https://swapi.co/api/people/。但是，我需要根据当前代码https://swapi.co/api/species/1/的特定值对数据结果进行排序或过滤，当我运行时，它会显示包含所有人物名称的表格，我只需要人类。这是我的代码：

＆＃13;

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);
    });
});

＆＃13;

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

＆＃13;

JSON端点来自https://swapi.co/api/people/

如何让表格仅显示人类的数据？

Answer 1

使用filter怎么样？

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

Answer 2

嗯，您知道species是人类，所以您只需使用filter检查const isHuman = guy=>~guy.species.indexOf('https://swapi.co/api/species/1/');数组中是否存在该网址。

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

您可以使用indexOf来确定数组中存在的元素。如果它不存在则返回负值，因此如果它存在则使用bitwise NOT (~)使其变得真实，如果它不是通过将-1变为零则为假。

然后你可以在循环之前过滤你的结果..

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);
    });
});

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

Answer 3

物种API返回的JSON包含people数组。因此，不要过滤people，而是遍历people数组。

但是，由于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

使用.filter()和.includes()的另一个示例（代替检测否定索引）：

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

这有用吗？

    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);
        }
   });

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

5 个答案: