根据键值获取 JSON 对象答案

【问题标题】：Fetching JSON objects based on key values根据键值获取 JSON 对象
【发布时间】：2020-04-26 01:36:01
【问题描述】：

这段代码在获取和渲染 JSON 数组中的所有内容方面做得很好，但是如果我只想列出具有特定键值（如性别）的对象怎么办？在获取或渲染期间会发生这种情况吗？

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

【问题讨论】：

获取更好。因为您只会获得您将使用的数据。
所以我猜测如果 JSON 页面中有大量信息，用户在浏览器呈现所有信息时仍然会看到一点停顿，无论我是否在获取时过滤数据还是在“const”语句之后，是吗？

标签： javascript arrays json fetch key-value

【解决方案1】：

理想的情况是使用 GraphQL，因此您仅根据您的条件获取所需的数据字段，在这种情况下，更改 getListOfNames 函数以在其 person.gender 符合您的条件时仅输出一个人没有区别或者只是在获取所有人员后将一组过滤后的人员传递给它

【讨论】：

【解决方案2】：

如果您想返回过滤后的结果，您必须将 api 端点配置为接受过滤器。否则，您将在渲染时进行过滤。

用下划线你会做 _.where(response, {gender: 'male'})

【讨论】：

是的，我在 .map 声明之前添加了... .filter(person => person.gender === 'male') ... 并且效果很好。谢谢！