Используя функцию 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>
))}
Результаты отображаются в консоли, как и ожидалось, но также я получаю много других результатов как неопределенные. Я думаю, что это проблема зацикливания с картой, но я не знаю, где именно моя проблема:
Вот что я нашел в консоли:
0
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
27 Май 2019 в 13:47
Краткий ответ :
extraitMP3[label][Mp3] должно быть extraitMP3[label].Mp3 (или, альтернативно, extraitMP3[label]['Mp3'], хотя большинство линтеров не рекомендует)
Но есть несколько вещей не так
- У вас есть дубликаты ключей, которые испортят ваши действия в React. Вместо
<li key={i}>поместите уникальный идентификатор, такой как идентификатор песни (для последнего вложенного цикла) - Как указано HRK44, вы должны использовать уникальный итератор в каждом цикле.
- В качестве личных предпочтений я бы использовал Object.entries чтобы избежать подобных проблем в будущем. Таким образом, вы никогда не потеряетесь в длинных сцепленных строках, и вам будет легче отлаживать ...
1
27 Май 2019 в 13:41