React / Redux array with keys and mapping

Question

I have an API which originally returned an array of objects with no key for each object like this:

[
{
"id": 4311,
"title": "C43- Miami Bow Cabinet Handles High Quality Stainless Steel (Polished) Handles",
"liked": false
},
{
"id": 2235,
"title": "C43- Miami Bow Cabinet Handles High Quality Stainless Steel (Brushed) Handles",
"liked": false
}
]

However it would help my app a lot if I could store this data with the id as the key for each nested object, I have updated my API to return data like this:

{
"2235": {
"title": "C43- Miami Bow Cabinet Handles High Quality Stainless Steel (Brushed) Handles",
"liked": false
},
"4311": {
"title": "C43- Miami Bow Cabinet Handles High Quality Stainless Steel (Polished) Handles",
"liked": false
}
}

However now I get an error from react - 'props.posts.map is not a function'

I cant understand what has changed to the data, doesnt redux assign a numerical key to each object if one isnt set anyways?

This is not an array anymore. But you can use Object.entries or Object.keys — Sagiv b.g
– Sagiv b.g, Commented Sep 15, 2017 at 12:38

Hemerson Carlin · Accepted Answer · 2017-09-15 12:37:59Z

1

map is meant to work with arrays only as described here https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

However, you can use lodash's map method which also works for normalized objects just like yours.

As an example, you can use:

const newArray = _.map(data, (item, key) => {
  // key is the item's id
  return item
})

If using a 3rd party module is not an option, you can work with Object.keys and get the very same result:

const newArray = Object.keys(data).map(key => data[key])

edited Sep 15, 2017 at 12:37

answered Sep 15, 2017 at 12:31

Hemerson Carlin

7,4241 gold badge29 silver badges38 bronze badges

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

Comments

lifeisgame · Accepted Answer · 2017-09-15 15:24:44Z

1

For store this data with the id as the key for each nested object, you can use reduce:

arr.reduce(function(map, obj){
  map[obj.id] = {
    title: obj.title,
    liked: obj.liked
}
 return map
}, {})

answered Sep 15, 2017 at 15:24

lifeisgame

113 bronze badges

Collectives™ on Stack Overflow

React / Redux array with keys and mapping

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related