從嵌套項中拉出 URL JSON - Vanillas javaScript - Audius API

Question

我正在玩 audius api。我希望能夠從 JSON 中提取圖像 url。它是嵌套的並按大小命名。

我的 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();

當我console.log(track.artwork); 我得到回應

{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

我希望能夠在我的<img src="" />中使用圖像 url

提前致謝！

Answer 1

試試下面的代碼。 因為您可能無法在雙引號內使用模板訪問。

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