Используя функцию map в React.js, чтобы получить то, что находится внутри Mp3 из этого 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
      }
    }
  }
}

Это моя функция карты:

  {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>
    ))}

Результаты отображаются в консоли, как и ожидалось, но также я получаю много других результатов как неопределенные. Я думаю, что это проблема зацикливания с картой, но я не знаю, где именно моя проблема:

Вот что я нашел в консоли:

Console

enter image description here

0
Ahmed 27 Май 2019 в 15:57

2 ответа

Лучший ответ

Это можно упростить как

{
   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>
            );
          })
        }

И использование индекса в качестве ключа не очень хороший способ

Надеюсь это поможет !!!

1
Joseph 27 Май 2019 в 13:47

Краткий ответ :

extraitMP3[label][Mp3] должно быть extraitMP3[label].Mp3 (или, альтернативно, extraitMP3[label]['Mp3'], хотя большинство линтеров не рекомендует)

Но есть несколько вещей не так

  • У вас есть дубликаты ключей, которые испортят ваши действия в React. Вместо <li key={i}> поместите уникальный идентификатор, такой как идентификатор песни (для последнего вложенного цикла)
  • Как указано HRK44, вы должны использовать уникальный итератор в каждом цикле.
  • В качестве личных предпочтений я бы использовал Object.entries чтобы избежать подобных проблем в будущем. Таким образом, вы никогда не потеряетесь в длинных сцепленных строках, и вам будет легче отлаживать ...
1
BJRINT 27 Май 2019 в 13:41