Filtering API response with JavaScript/React-CodePudding

I'm trying to filter an API call so I can make an array of just one of its properties but I can't seem to make it work.

Response Structure

"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
            },
}

For a line chart, I need an array all of the "open" values and ideally the dates too. I've tried everything I can think of but it seems that the unique keys are throwing me off.

Trying to map the object keeps give the error "TypeError: items.map is not a function".

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

I'm fairly new to working with APIs so I imagine I am just missing something simple.

Thank you!!

CodePudding user response：

Your data is an object, you could use Object.values() to first get the object's values in an array and then use map like you did.

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

CodePudding user response：

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

Code:

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)

CodePudding user response：

The problem of your code is the funcions of map, filter and reduce works with arrays and not with objects.

One solution is change your structure response from object of objects to -> array of objects like this

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

to:

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