如何在对象内部的json对象中获取数据？

Question

我尝试使用 Musixmatch API 在对象 JSON 中获取一些 track_list 数据这是我的代码"body": {        "track_list": [            {                "track": {                    "track_id": 194169151,                    "track_name": "Blinding Lights",                    "track_name_translation_list": [],                    "track_rating": 100,                    "commontrack_id": 104185748,                    "instrumental": 0,                    "explicit": 0,                    "has_lyrics": 1,                    "has_subtitles": 1,                    "has_richsync": 1,                    "num_favourite": 3237,                    "album_id": 37216011,                    "album_name": "After Hours",                    "artist_id": 13937035,                    "artist_name": "The Weeknd",                    "track_share_url": "https://www.musixmatch.com/lyrics/The-Weeknd-3/Blinding-Lights?utm_source=application&utm_campaign=api&utm_medium=rickyreza%3A1409619798940",                    "track_edit_url": "https://www.musixmatch.com/lyrics/The-Weeknd-3/Blinding-Lights/edit?utm_source=application&utm_campaign=api&utm_medium=rickyreza%3A1409619798940",                    "restricted": 0,                    "updated_time": "2020-04-10T08:31:57Z",                    "primary_genres": {                        "music_genre_list": [                            {                                "music_genre": {                                    "music_genre_id": 7,                                    "music_genre_parent_id": 34,                                    "music_genre_name": "Electronic",                                    "music_genre_name_extended": "Electronic",                                    "music_genre_vanity": "Electronic"                                }                            }                        ]                    }                }            },我只是想检查我是否可以通过这样做来获取轨道内的数据lyric.album_name。并试图获取专辑，但我得到了未定义的专辑名称。这是我的 main.js我怎样才能得到轨道内的所有轨道名称和东西？

Answer 1

您忘记了.track歌词对象中的属性。尝试这个

...
<div>${lyric.track.album_name}</div>

Answer 2

我检查了 api 调用https://api.musixmatch.com/ws/1.1/chart.tracks.get?chart_name=top&page=1&page_size=5&country=jp&f_has_lyrics=1&apikey=78fa4727ab9c4495d4fc07dae75f775btracklist 返回一个对象数组，其中每个对象只有一个键track

像这样的东西track_list = [{track:{}},{track:{}}]

使用${lyric.track.album_name}它应该工作

Answer 3

您忘记了一个属性，但是您可以在函数中使用解构来减少嵌套，这是对代码的一点修改：

const renderAllData = (trackList) => {

  const lirikElement = document.querySelector("#popularLyrics");

  lirikElement.innerHTML = "";

  trackList.forEach(({ track }) => {

    lirikElement.innerHTML += `

      <div>${track.album_name}</div>

    `;

  });

};

renderAllData(data.body.track_list);