Pull URL from a nested item in JSON - Vanillas javaScript - Audius API

Question

I am playing around with the audius api. I would like to be able to pull the image url out of the JSON. It is nested and named by size.

My app.js:

function fetchData() {
    fetch("https://audius-discovery-4.cultur3stake.com/v1/users/nkd7P/tracks?app_name=unnecessaryroughnessplayer")
    .then(response => {
        if(!response.ok) {
            throw Error("ERROR");
        }
        return response.json();
    }).then(tracks => {
        const html = tracks.data.map(track =>{
            return `
            <div class="track">
                <div class="track-title">
                    <a href="https://audius.co${track.permalink}">
                        <h2>
                            ${track.user.name} 
                            <br/> 
                            ${track.title}
                        </h2>
                    </a>
                    <!--<img src="${track.artwork}" alt=""/>-->
                </div>
                <p>Description: ${track.description}</p>
                <p>Release Date: ${track.release_date}</p>
                <p>Duration: ${track.duration}</p>
                <p>Plays: ${track.play_count}</p>
                <p>Genre: ${track.genre}</p>
                <p>Mood: ${track.mood}</p>
                <p>Tags: ${track.tags}</p>
                <hr>
            </div>
                `
                ;
        }).join('');
        document.querySelector("#app").insertAdjacentHTML("afterbegin", html);
        
    }).catch(error => {
        console.log(error);
    });
}

fetchData();

When I console.log(track.artwork); I get a response of

{150x150: 'https://creatornode3.audius.co/ipfs/QmVFM2Ypvqc4x1CReHqqNrsZ8Cig6gEznuE7GDv2Mdywqg/150x150.jpg', 480x480: 'https://creatornode3.audius.co/ipfs/QmVFM2Ypvqc4x1CReHqqNrsZ8Cig6gEznuE7GDv2Mdywqg/480x480.jpg', 1000x1000: 'https://creatornode3.audius.co/ipfs/QmVFM2Ypvqc4x1CReHqqNrsZ8Cig6gEznuE7GDv2Mdywqg/1000x1000.jpg'}
150x150: "https://creatornode3.audius.co/ipfs/QmVFM2Ypvqc4x1CReHqqNrsZ8Cig6gEznuE7GDv2Mdywqg/150x150.jpg"
480x480: "https://creatornode3.audius.co/ipfs/QmVFM2Ypvqc4x1CReHqqNrsZ8Cig6gEznuE7GDv2Mdywqg/480x480.jpg"
1000x1000: "https://creatornode3.audius.co/ipfs/QmVFM2Ypvqc4x1CReHqqNrsZ8Cig6gEznuE7GDv2Mdywqg/1000x1000.jpg"
[[Prototype]]: Object

I would like to be able to use the image url inside of my <img src="" />

Thanks in advance!

You need to use the square bracket notation to access properties which start with a number. — evolutionxbox, Feb 19 '22 at 15:11
Does this answer your question? [Dot and Square Bracket Notation](https://stackoverflow.com/questions/44417664/dot-and-square-bracket-notation) — evolutionxbox, Feb 19 '22 at 15:14

score 0 · Answer 1 · answered Feb 19 '22 at 16:48

Try the below code. As you might not be able to use template access within the double quotes.

function fetchData() {
    fetch("https://audius-discovery-4.cultur3stake.com/v1/users/nkd7P/tracks?app_name=unnecessaryroughnessplayer")
    .then(response => {
        if(!response.ok) {
            throw Error("ERROR");
        }
        return response.json();
    }).then(tracks => {
        const html = tracks.data.map(track =>{
            return `
            <div class="track">
                <div class="track-title">
                    <a href="https://audius.co"+${track.permalink}>
                        <h2>
                            ${track.user.name} 
                            <br/> 
                            ${track.title}
                        </h2>
                    </a>
                    <!--<img src="${track.artwork}" alt=""/>-->
                </div>
                <p>Description: ${track.description}</p>
                <p>Release Date: ${track.release_date}</p>
                <p>Duration: ${track.duration}</p>
                <p>Plays: ${track.play_count}</p>
                <p>Genre: ${track.genre}</p>
                <p>Mood: ${track.mood}</p>
                <p>Tags: ${track.tags}</p>
                <hr>
            </div>
                `
                ;
        }).join('');
        document.querySelector("#app").insertAdjacentHTML("afterbegin", html);
        
    }).catch(error => {
        console.log(error);
    });
}

fetchData();

Pull URL from a nested item in JSON - Vanillas javaScript - Audius API

1 Answers1