按密钥过滤 API答案

【问题标题】：Filter API by its Key按密钥过滤 API
【发布时间】：2020-04-21 06:46:49
【问题描述】：

嘿，伙计们有一些 JSON 数据和 API 试图找出过滤其类别的 API，目前只有“食物和物品”。这里是数据。

{
  "id": 1587428052314,
  "_id": "5e9e5599a3f3e540e9c6553c",
  "Title": "Home Cleaning Sanitiser Box",
  "Description": "This box has everything you need - right now!"
  "Phone": "021881821921",
  "Category": "food"
}

这里是api：localhost:4000/api/user-listing/

我可以在我的.then 的承诺链中以某种方式过滤它吗？

Axios.get("localhost:4000/api/user-listing")
  .then((res) => {
    // in here ?? this.setState({ listings: res.data });
  });

干杯

【问题讨论】：

如果您提供的 API 返回与用户相关的所有数据，并且您想使用 "Category": "food" 过滤所有数据，您可以通过 filter 数组助手轻松完成此操作，如果有请告诉我麻烦了。
请附上Minimal, Complete, and Reproducible 的尝试示例。
好吧，我正在使用与 axios 的反应，我了解如何获得推送等，所以当我选择食物类别并转到组件时，我猜我只是做一个 componentdimount() 然后获取所有数据然后使用 .filter 过滤它并获得所有“食物”类别？
类似的东西。您总是使用相同的过滤器类别，还是动态的？
相同的，我可以在.then 内做吗？ axios.get("localhost:4000/api/user-listing").then((res) => { // 在这里 this.setState({ Listings: res.data }); }); };

标签： json reactjs api axios

【解决方案1】：

按照您的预期，有多种方法可以做到这一点。如果您希望存在一个端点来使用"Category": "food" 检索所有数据，那么您无法使用前端工具来处理它（实际上有几种方法，但它们不再来自后端）。

问题说明

所以我们假设当我们调用localhost:4000/api/user-listing/ 时，我们将收到一个对象数组，其中包含多个带有"Category": "food" 的对象，那么我们假设我们已经从上述端点检索到以下数据。

[{
    "id": 1,
    "_id": "5e9e5599a3f3e540e9c6553c-1",
    "Title": "coke",
    "Description": "This box has everything you need - right now!",
    "Phone": "021881821921",
    "Category": "drink"
  },
  {
    "id": 2,
    "_id": "5e9e5599a3f3e540e9c6553c-2",
    "Title": "salmon",
    "Description": "This box has everything you need - right now!",
    "Phone": "021881821921",
    "Category": "food"
  },
  {
    "id": 3,
    "_id": "5e9e5599a3f3e540e9c6553c-3",
    "Title": "soda",
    "Description": "This box has everything you need - right now!",
    "Phone": "021881821921",
    "Category": "drink"
  },
  {
    "id": 4,
    "_id": "5e9e5599a3f3e540e9c6553c-4",
    "Title": "rice",
    "Description": "This box has everything you need - right now!",
    "Phone": "021881821921",
    "Category": "food"
  }
]

注意：我刚刚制作了这个示例数据数组以进行更多说明。您应该在代码中将其替换为 res.data。

过滤数据

要使用"Category": "food" 获取所有数据，我们只需执行以下操作：

const arrayOfData = [{
    "id": 1,
    "_id": "5e9e5599a3f3e540e9c6553c-1",
    "Title": "coke",
    "Description": "This box has everything you need - right now!",
    "Phone": "021881821921",
    "Category": "drink"
  },
  {
    "id": 2,
    "_id": "5e9e5599a3f3e540e9c6553c-2",
    "Title": "salmon",
    "Description": "This box has everything you need - right now!",
    "Phone": "021881821921",
    "Category": "food"
  },
  {
    "id": 3,
    "_id": "5e9e5599a3f3e540e9c6553c-3",
    "Title": "soda",
    "Description": "This box has everything you need - right now!",
    "Phone": "021881821921",
    "Category": "drink"
  },
  {
    "id": 4,
    "_id": "5e9e5599a3f3e540e9c6553c-4",
    "Title": "rice",
    "Description": "This box has everything you need - right now!",
    "Phone": "021881821921",
    "Category": "food"
  }
]

const newArray = arrayOfData.filter(data => data.Category === "food")

console.log(newArray)

更新

所以当你更新问题时，如果你想处理.then 中的数据，它将是这样的：

Axios.get("localhost:4000/api/user-listing")
  .then((res) => {
    this.setState({
      listing: res.data.filter(data => data.Category === "food")
    })
  });

【讨论】：

好的，现在看一下，我想我必须在地图中进行 .filter 操作？
@NateDavid-Peter filter 本身会返回一个匹配数据的数组，因此无需在filter 中使用map，反之亦然。
是的，完美！现在当我 console.table(this.state.listings) 我得到食物时，在承诺范围内工作得很好，谢谢
@NateDavid-Peter 如果它对您有用，请将其标记为答案，以帮助社区中的其他窥视者在遇到相同问题时找到答案。 :-)
是的，如果你想更新它，答案是你发送的最后更新，干杯