A Problem when trying to access to specific JSON data using map in React.js

Question

I can not read data from JSON. I checked that the data is stored in the component state from console after the component get mounted. In the return statement, I tried to render the url string from JSON data using map method. When I log the data information from the console, the data can be found in 'this.state.data' or 'elm' but when add 'multimedia[idx]' to the end of it, it says can not find the data. I want to know the reason of it.

this.state.data.map((elm, idx) =>
//...
<div>{elm.multimedia[idx].url}</div>
//...

JSON data shape of multidmedia element logged from the console:

(29) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, undefined, {…}]

0:{
  caption: "string",
  copyright: "string",
  format: "mediumThreeByTwo210",
  height: 140,
  subtype: "photo",
  type: "image",
  url: "https://static01.nyt.com/images/2019/02/05/science/05SCI-ZIMMER1/05SCI-ZIMMER1-mediumThreeByTwo210.jpg",
  width: 210
}

Luis Lopez · Accepted Answer · 2019-01-31 20:13:27Z

1

Short answer

The reason why it cannot read from the the multimedia property is because you are trying to access the multimedia property by using an index generated from the this.state.data property. Therefore, it may be that your current index is greater than the items inside the multimedia array.

Explanation

So, if you have for example...

this.state.data = [
  {multimedia: [{}, {}, {}]},
  {multimedia: [{}, {}, {}]},
  {multimedia: [{}, {}]},
]

Your map will start looking at the first element in the data array, and passing that as the elm variable will be populated with the first element, and so on... but when accessing the 3rd element in the data array, you will get an object with only 2 items in the multimedia array, but since you're accessing the 3rd element of this.state.data, your idx variable will be set to 2, and when trying to access elm.multimedia[idx].url it will fail because elm.multimedia[2] it's undefined for the 3rd element.

answered Jan 31, 2019 at 20:13

Luis Lopez

511 bronze badge

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

2 Comments

Jay Over a year ago

Your answer is close to the solution. the problems was, there was an undefined element among those 29 element. so when the map methods tried accessed to the element, It ended up in generating error event thought other 28 elements were okay. thank you for your help :)

Luis Lopez Over a year ago

I'm glad that it helped you :)

quirimmo · Accepted Answer · 2019-01-31 20:06:31Z

1

From what I can see from your data, it looks like your data has an attribute multimedia which contains the array of the objects with the shape that you posted.

So in this case, your code should be something like:

this.state.data.multimedia.map((elm, idx) =>
//...
<div>{elm.url}</div>

Otherwise, if your data is already the array of those objects, you can do directly something like:

this.state.data.map((elm, idx) =>
//...
<div>{elm.url}</div>

answered Jan 31, 2019 at 20:06

quirimmo

10k3 gold badges33 silver badges45 bronze badges

Collectives™ on Stack Overflow

A Problem when trying to access to specific JSON data using map in React.js

2 Answers 2

Short answer

Explanation

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Short answer

Explanation

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related