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