React: map() inside map()

Question

I have an object that has an array of objects inside it, and this array has another array of objects inside it. I'm using map to render html and when I use map inside another map shows an error, so using console.log, sometimes it shows the value and other times it shows undefined. Something it's happening in the render.

{
    "id": "foo"
    "adSets": [
        {
            "id": "adset1",
            "name": "adset1",
            "ads": [
                {
                    "id": "ad1",
                    "name": "ad1",
                }
            ]
        },
        {
            "id": "adset2",
            "name": "adset1",
            "ads": [
                {
                    "id": "ad2",
                    "name": "ad2",
                },
                {
                    "id": "ad3",
                    "name": "ad3",
                }
            ]
        }
    ]
}

{campaignData.adSets.map((adSet) => {
               console.log(adSet.ad)
               return (
                 <li key={adSet.id}>
                   <span className="">{adSet.name}</span>
                   <ul>
                   {adSet.ads.map((ad) => {
                     return (
                       <li key={ad.id}>
                        <span className="">{ad.name}</span>
                       </li>
                     );
                   })}
                  </ul>
                 </li>
               );
})}

picture of results

can you add the dummy format of the array of object it will be help to fix. — Mahadev Mirasdar, Jun 10 '23 at 16:23
Does this answer your question? [How to map inside a map function in reactjs](https://stackoverflow.com/questions/45913619/how-to-map-inside-a-map-function-in-reactjs) — Komeil Mehranfar, Jun 10 '23 at 16:43
Welcome to Stackoverflow! Please edit your question to remove the image, do not post text in images, post the text itself. Also, "what's up?" is not a clear question. It looks like your screenshot is showing the results of `console.log()`, which you don't show in your question. Check out [how to ask](https://stackoverflow.com/help/how-to-ask) as well. A minimal reproducible example would help here. Your question may be closed unless you add clarifying details. — Andy Ray, Jun 10 '23 at 17:13
What do you mean by "*other times it returns undefined.*"? `map()` always returns an array, never undefined. — Bergi, Jun 10 '23 at 17:13
`adSet.name` name attr is not there in the array, that's why it shows you `undefined` otherwise it will surely return some values of array inside of it. — nuser137, Jun 10 '23 at 18:57
@eventHandler Yes, all arrays have elements. I also believe it is ok but I don't undestand why the first time I console.log it shows the array's elements and in the last time it shows undefined. That's why I'm getting an error. — kyc, Jun 10 '23 at 20:16
@KomeilMehranfar It doesn't. I'm trying to map an array that it's inside another array. — kyc, Jun 10 '23 at 20:19

score -1 · Answer 1 · answered Jun 10 '23 at 17:06

let obj = {
  "id": "foo",
  "adSets": [{
      "id": "adset1",
      "ads": [{
        "id": "ad1"
      }]
    },
    {
      "id": "adset2",
      "ads": [{
          "id": "ad2"
        },
        {
          "id": "ad3"
        }
      ]
    }
  ]
}

//console.log(obj)

for (let x in obj) {
  if (Array.isArray(obj[x])) {
    obj[x].map((e) => {
      for (let j in e) {
        if (Array.isArray(e[j])) {
          e[j].map((k) => {
            console.log(k.id);
          })
        } else {
          console.log(e[j]);
        }
      }
    });
  }
}

React: map() inside map()

1 Answers1