使用 JavaScript/React 过滤 API 响应

Question

我正在尝试过滤一个 API 调用，这样我就可以制作一个仅包含其一个属性的数组，但我似乎无法让它工作。

响应结构

"items": {
            "1649169000": {
                "date": "05-04-2022",
                "date_utc": 1649169000,
                "open": 16.08,
                "high": 16.08,
                "low": 15.91,
                "close": 15.96,
                "volume": 0
            },
            "1649172600": {
                "date": "05-04-2022",
                "date_utc": 1649172600,
                "open": 15.96,
                "high": 16,
                "low": 15.89,
                "close": 15.9,
                "volume": 9990775
            },
            "1649176200": {
                "date": "05-04-2022",
                "date_utc": 1649176200,
                "open": 15.9,
                "high": 15.99,
                "low": 15.89,
                "close": 15.95,
                "volume": 7927672
            },
}

对于折线图，我需要一个包含所有“开放”值的数组，最好还有日期。我已经尝试了所有我能想到的方法，但似乎唯一键让我失望了。

尝试映射对象时不断出现错误“TypeError：items.map 不是函数”。

 items.map((item, index) => item.open)

我对使用 APIs 还很陌生，所以我想我只是遗漏了一些简单的东西。

谢谢！！

Answer 1

您的数据是一个对象，您可以使用 Object.values() 首先在数组中获取对象的值，然后像您一样使用 map。

const data = {
  "items": {
    "1649169000": {
      "date": "05-04-2022",
      "date_utc": 1649169000,
      "open": 16.08,
      "high": 16.08,
      "low": 15.91,
      "close": 15.96,
      "volume": 0
    },
    "1649172600": {
      "date": "05-04-2022",
      "date_utc": 1649172600,
      "open": 15.96,
      "high": 16,
      "low": 15.89,
      "close": 15.9,
      "volume": 9990775
    },
    "1649176200": {
      "date": "05-04-2022",
      "date_utc": 1649176200,
      "open": 15.9,
      "high": 15.99,
      "low": 15.89,
      "close": 15.95,
      "volume": 7927672
    },
  }
}

const result = Object.values(data.items).map((v) => v.open);

console.log(result);

Answer 2

你可以Array.prototype.map() the Object.values() of data object, and select the properties you want by using Destructuring assignment{ date, open }

代码：

const data = {items: {'1649169000': {date: '05-04-2022',date_utc: 1649169000,open: 16.08,high: 16.08,low: 15.91,close: 15.96,volume: 0,},'1649172600': {date: '05-04-2022',date_utc: 1649172600,open: 15.96,high: 16,low: 15.89,close: 15.9,volume: 9990775,},'1649176200': {date: '05-04-2022',date_utc: 1649176200,open: 15.9,high: 15.99,low: 15.89,close: 15.95,volume: 7927672,}}}

const result = Object
  .values(data.items)
  .map(({ date, open }) => ({ date, open }))

console.log(result)

Answer 3

您的代码的问题是 map、filter 和 reduce 的功能适用于数组而不适用于对象。

一个解决方案是将您的结构响应从对象对象更改为 -> 对象数组，如下所示

items:'{ 
  {...},
  {...}
}'

至：

items:'[ 
      {...},
      {...}
    ]'

使用 JavaScript/React 过滤 API 响应

Filtering API response with JavaScript/React

javascript

json

reactjs