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

Question

我尝试使用Mu6-MatchAPI在对象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来获取跟踪中的数据。我试着拿到专辑，但是我得到了一些album_name没有定义的东西。这是我的main.js

main.js

function main() {

// initialize the data 
const baseUrl = "https://api.musixmatch.com/ws/1.1";
const apiKey = "78fa4727ab9c4495d4fc07dae75f775b";
const chartTrack = "chart.tracks.get?chart_name=top&page=1&page_size=5&country=jp&f_has_lyrics=1"

const getLirik = () => {
    fetch(`${baseUrl}/${chartTrack}&apikey=${apiKey}`)
        .then(response => {
            return response.json();
        })
        .then(responseJson => {
            // console.log(responseJson);
            // trackList.track_list = responseJson.message.body.track_list
            console.log(responseJson.message.body.track_list.track);
            // console.log(responseJson.message.body.track_list.track.album_name);
            renderAllData(responseJson.message.body.track_list);
        })
        .catch(error => {
            console.log(error);
        })
}


/* 
    for making a new html DOM 
*/

const renderAllData = (lyrics) => {
    const lirikElement = document.querySelector("#popularLyrics");
    lirikElement.innerHTML = "";

    lyrics.forEach(lyric => {
        lirikElement.innerHTML += `
        <div>${lyric.album_name}</div>
        `
    })

}

 getLirik();
}

export default main;

我怎样才能让所有的track_name和东西在轨道上？

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=78fa4727ab9c4495d4fc07dae75f775b tracklist返回一个对象数组，其中每个对象只有一个键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);