Cant seem to access object property in array

Question

Console output:

{
  295798: {
    box_type: "QB",
    color: "Assorted",
    floor_allowed: 2100,
    grade: false,
    head_size: null,
    is_special: "0",
    length: false,
    live_inventry: "1",
  }
}

I have an array that is shown in the screenshot above in chrome console. when I print out the array it comes up.

console.log(props.thisData);
console.log(props.thisData[0].color);

props.thisData shows the whole array. However when I try to access the color I get the following error:

Product.jsx:56 Uncaught TypeError: Cannot read property 'color' of undefined

Rostyslav · Accepted Answer · 2020-11-23 21:51:16Z

1

The data structure in your console output is not an Array. Its an Object with numbers as keys. It seems that there is no element with key 0 (no property 0 in the object). Hence, you get undefined.

To access your color property you would have to access it through the key on your object:

props.thisData['295798'].color

UPDATE

I suggest you to convert your object into an array and add the key as an id to each element if you want to work with the Array.

const dataArray = Object
  .keys(props.thisData)
  .map(key => ({ id: key, ...props.thisData[key] }))

edited Nov 23, 2020 at 21:51

answered Nov 23, 2020 at 21:27

Rostyslav

2,88612 silver badges18 bronze badges

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

3 Comments

mcjanty32 Over a year ago

any idea on how I can get the info then?

mcjanty32 Over a year ago

that number is different for each product, so how can I a variable instead of the number itself? props.thisData[ID_HERE].color /

Rostyslav Over a year ago

@mcjanty32 just convert it to an array as in the update

Collectives™ on Stack Overflow

Cant seem to access object property in array

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related