How to render nested arrays in objects in React?

Question

I have an object like this:

 myObject: {
  "artists" : {
    "items" : [ {
      "id" : "423587fgerhk34t",
      "images" : [ {
        "height" : 640,
        "url" : "https://url",
        "width" : 640
      }, {
        "height" : 320,
        "url" : "https://url",
        "width" : 320
      }],
      "name" : "Artist Name",
    } ] 
   }
  }

Excuse me for sounding stupid, but how do I, in my React app, reach the ID, images and name? Can someone ELI5 this for me?

I've tried

Object.entries(myObject).map()

Object.keys(myObject).map()

myObject.artists.items.map()

but none of them works, at least not what I'm trying.

(I cannot change the object, it's a response from an API)

Really appreciate some help here. I need to render images and artistname and save the ID.

Edit, been trying this for example:

  const displaySearchResult = Object.keys(myObject).map((artist) =>
    <div className="search-result-item">
      <img src={artist.images[1].url} alt="Artist"/>
      <b key={artist.id}>{artist.name}</b>
    </div>
    )

But basically, all I'm getting is

"Objects are not valid as a React child (found: object with keys {href, items, limit, next, offset, previous, total}). If you meant to render a collection of children, use an array instead." (Objects.entries)

or

"Cannot read properties of undefined ('reading items')" (myObject.artists.items.map())

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map — Majed Badawi, Oct 06 '21 at 16:10
Are you able to provide a code sample of what you're trying to map too? i.e this object being used in situ of the rendering component. — Josh, Oct 06 '21 at 16:12
Does your object really have a top-level property called myObject? If you named the variable myObject too, then you'll have `myObject.myObject.artists.items.map(...)` — James, Oct 06 '21 at 16:13
Does this answer your question? [How can I access and process nested objects, arrays or JSON?](https://stackoverflow.com/questions/11922383/how-can-i-access-and-process-nested-objects-arrays-or-json) — Dan O, Oct 06 '21 at 16:13
Your third attempt looks right to me, we need more info to determine what mistake you're making - try a [mcve] — Jamiec, Oct 06 '21 at 16:13
@James well it's not named that from the API, but I've put it in a state called myObject, if that makes sense... (let [myObject, setMyObject] = useState({})) — Ned, Oct 06 '21 at 16:17
Your edit has now introduced some code with `searchResults` as the thing being mapped. That differs entirely from the rest of the question. — Jamiec, Oct 06 '21 at 16:20
@Jamiec I'm trying to make my code anonymous here which is why I'm changing everything to generic names. I obviously forgot to do that in my update. — Ned, Oct 06 '21 at 16:22

score 0 · Answer 1 · answered Oct 06 '21 at 16:25

0

From the information you have given the only mistake you seem to be making is iterating over the keys of myObject - which only has 1 key artists and that clearly does not give what you're trying to do judging by the HTML you're trying to output.

In actual fact you need to use map over myObject.artists.items which is an array of objects with properties which seem to match what you're trying to output:

const displaySearchResult = myObject.artists.items.map((artist) =>
      ... rest of your code
);

answered Oct 06 '21 at 16:25

Jamiec

133,658
13
134
193

I've tried this, but my applications fails with message: TypeError: Cannot read properties of undefined (reading 'items'). – Ned Oct 06 '21 at 16:40
@Ned if right before this line you add `console.log(myObject.artists)` what do you see in the console? – Jamiec Oct 06 '21 at 17:00

score 0 · Answer 2 · answered Oct 06 '21 at 16:43

If you want to display 2 multiple image URL's dynamically for a single name, you can try with the below code.

const displaySearchResult = myObject.artists.items.map((artist) =>
    <div className="search-result-item">
      {artist.images.map((img) =>
      <img src={img.url} alt="Artist"/>
      )}
      <b key={artist.id}>{artist.name}</b>
    </div>
    )

Or If you want to display one image with name and another image with same name dynamically, then you can try below code.

const displaySearchResult = myObject.artists.items.map((artist) =>
    <div className="search-result-item">
      {artist.images.map((img) =>
      <div>
        <img src={img.url} alt="Artist"/>
        <b key={artist.id}>{artist.name}</b>
      </div>
      )}
    </div>
    )

How to render nested arrays in objects in React?

2 Answers2