Estoy jugando con la api de audius. Me gustaría poder extraer la URL de la imagen del JSON. Está anidado y nombrado por tamaño.
Mi aplicación.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(); Cuando console.log(track.artwork); obtengo una respuesta de
{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 Me gustaría poder usar la URL de la imagen dentro de mi <img src="" />
¡Gracias por adelantado!
Pruebe el siguiente código. Como es posible que no pueda usar el acceso a la plantilla dentro de las comillas dobles.
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();