how to map inside another map in React.js

Question

Using the map function in React.js to get what's inside Mp3 from this json:

{
  "175": {
    "label": "Pub Radio",
    "icone": "",
    "Mp3": {
      "33278": {
        "id": 33278,
        "titre": "Ricardo Villalobos - Caminando",
        "intention1": "Doux",
        "intention2": "Doux",
        "intention3": "Doux",
        "langue": "Allemand",
        "visibilite": 1
      }
    }
  },
  "176": {
    "label": "Pub Cd/Dvd",
    "icone": "",
    "Mp3": {
      "33277": {
        "id": 33277,
        "titre": "Mano lo taugh - Primative People",
        "intention1": "Chaleureux, rassurant",
        "intention2": "Joyeux",
        "intention3": "Souriant",
        "langue": "Allemand",
        "visibilite": 1
      },
      "33279": {
        "id": 33279,
        "titre": "Foals - Late Night (Solomun Remix).mp3",
        "intention1": "Amical, complice",
        "intention2": "Amical, complice",
        "intention3": "Amical, complice",
        "langue": "Allemand",
        "visibilite": 1
      }
    }
  },
  "245": {
    "label": "Billboard",
    "icone": "",
    "Mp3": {
      "33280": {
        "id": 33280,
        "titre": "Techno",
        "intention1": "Posé, calme",
        "intention2": "Amical, complice",
        "intention3": "Souriant",
        "langue": "Americain",
        "visibilite": 1
      }
    }
  }
}

this is my map function :

  {Object.keys(extraitMP3).map((label, i) => (
    <li key={i}>
        <span >key: {i} Name: {extraitMP3[label]}</span>
            {Object.keys(extraitMP3[label]).map((Mp3, i) => (
        <li key={i}>
            <span >key: {i} Name: {extraitMP3[label][Mp3]}</span>

            {Object.keys(extraitMP3[label][Mp3]).map((idSon, i) => (
        <li key={i}>
            <span >key: {i} Name: {extraitMP3[label][Mp3][idSon]}</span>
            {console.log('Titre',extraitMP3[label][Mp3][idSon].titre)}
            {console.log('Intention 1',extraitMP3[label][Mp3][idSon].intention1)}
            {console.log('Intention 2',extraitMP3[label][Mp3][idSon].intention2)}
            {console.log('Intention 3',extraitMP3[label][Mp3][idSon].intention3)}
            {console.log('Langue',extraitMP3[label][Mp3][idSon].langue)}
            {console.log('Visibilite',extraitMP3[label][Mp3][idSon].visibilite)}
        </li>
    ))}
        </li>
    ))} 
        </li>
    ))}

Results are shown in the console as expected but also I receive a lot of other results as undefined. I think it's a problem of looping with map but I don't where is my problem exactly :

This is what I found in the console :

Quick tip, avoid using same name variables (i) inside nested loops...That might be your problem... — HRK44
– HRK44, Commented May 27, 2019 at 13:21
i changed it to i, j and k but nothing happened still the same problem — Ahmed
– Ahmed, Commented May 27, 2019 at 13:28
<span >key: {i} Name: {extraitMP3[label]}</span> this will output an object, is this fine? — HRK44
– HRK44, Commented May 27, 2019 at 13:35
what do you mean it's not clear I deleted it the results don't change — Ahmed
– Ahmed, Commented May 27, 2019 at 13:40

Joseph · Accepted Answer · 2019-05-27 13:47:11Z

this can be simplified as

{
   Object.keys(extraitMP3).map(ids => {
     return (
        <li key={ids}>
           <span >key: {ids} Name: {extraitMP3[ids].label}</span>
              {
                Object.keys(extraitMP3[ids].Mp3).map(idJson => {
                  return(
                    <li key={idJson}>
                      <span>key: {idJson} Name: {idJson}</span>
                      {console.log('Titre',extraitMP3[ids].Mp3[idJson].titre)}
                      {console.log('Intention1',extraitMP3[ids].Mp3[idJson].intention1)}
                      {console.log('Intention 2',extraitMP3[ids].Mp3[idJson].intention2)}
                      {console.log('Intention 3',extraitMP3[ids].Mp3[idJson].intention3)}
                      {console.log('Langue',extraitMP3[ids].Mp3[idJson].langue)}
                      {console.log('Visibilite',extraitMP3[ids].Mp3[idJson].visibilite)}
                   </li>
                  );
                 })
                }
              </li>
            );
          })
        }

and using index as key is not a good way

hope this helps !!!

BJRINT · Accepted Answer · 2019-05-27 13:41:38Z

1

Short answer :

extraitMP3[label][Mp3] should be extraitMP3[label].Mp3 (or alternatively extraitMP3[label]['Mp3'] though not recommended by most linter)

But there are several things wrong

You got duplicate keys which will mess up your React performances. Instead of <li key={i}> put an unique identifier such as the song id (for the last nested loop)
As pointed by HRK44 you should use a unique iterator in each of the loop.
Personal preference, I would use Object.entries to avoid this kind of problem in the future. This way you'll never get lost in long concatenated strings and it will be easier to debug...

answered May 27, 2019 at 13:41

BJRINT

6673 silver badges9 bronze badges

Collectives™ on Stack Overflow

how to map inside another map in React.js

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