如何在 object 中获取 json object 中的数据？

Question

i try to get some track_list data inside object JSON using Musixmatch API

here is my code

"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"
                                }
                            }
                        ]
                    }
                }
            },

i just want to check if i can geat the data inside a track by doing lyric.album_name . and tried to get the album and i got this kind of things album_name as undefined. here is my 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;

How do i can get all thos track_name and stuff inside track?

Answer 1

You forgot the property .track in your lyrics object. Try this

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

Answer 2

i checked the api call 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 the tracklist returns an Array of objects, where each object has only one key track

something like this track_list = [{track:{}},{track:{}}]

use ${lyric.track.album_name} it should work

Answer 3

you forgot one property, but you can do less nesting using destructuring in the function, this is a litle modification of your code:

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