Filtering API response with JavaScript/React

Question

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!!

axtck · Accepted Answer · 2022-05-05 16:29:55Z

1

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

answered May 5, 2022 at 16:29

axtck

3,9753 gold badges17 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

cornell77 Over a year ago

Thank you so much! This helped me tremendously!!!

axtck Over a year ago

@cornell77 glad I could help, check out Object.keys, Object.values and Object.entries to get a better understanding of objects and arrays :)

Yosvel Quintero · Accepted Answer · 2022-05-05 16:46:00Z

1

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)

edited May 5, 2022 at 16:46

answered May 5, 2022 at 16:32

Yosvel Quintero

19.1k5 gold badges39 silver badges47 bronze badges

1 Comment

cornell77 Over a year ago

Thank you! Between you and axtck I was able to figure out my issue.

Jorge Hernández · Accepted Answer · 2022-05-05 17:04:35Z

1

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:'[ 
      {...},
      {...}
    ]'

answered May 5, 2022 at 17:04

Jorge Hernández

231 silver badge5 bronze badges

Collectives™ on Stack Overflow

Filtering API response with JavaScript/React

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related