Estoy tratando de mostrar un reproductor de Spotify que enumera todas las pistas en un álbum específico proporcionado por la entrada del usuario. La autorización y el mapeo de los datos funcionan bien y puedo confirmar que realmente obtuve el URI correcto para el álbum específico en la consola.
¿Cómo puedo pasar los datos de URI a la dirección del jugador? Intenté pasar el valor como una variable y simplemente agregarlo a la ruta, pero no funcionó para mí. Si pego el URI directamente desde la consola, sin embargo, funciona según lo previsto
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link rel="stylesheet" href="style.css"> </head> <body> <p class="songURI"></p> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> //SPOTIFY PLAYER, with pasted URI. Here, i would like to use the data i retrieve from the script file instead <iframe src="https://open.spotify.com/embed?uri=spotify:album:6s9twOs9wMKOEluU5dkBE0" width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe> <script src="spotifyscript.js"></script> </body> </html>JS
var accessToken = 'TOKEN'; fetch('https://api.spotify.com/v1/search?q='+search+'&type=album&market=SE&limit=5&offset=5', { method: 'GET', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + accessToken } }) .then(response => response.json()) .then(data => { const spotifylist = data.albums.items; console.log(data); spotifylist.map((items) => { const track = items.name; const uri = items.uri; console.log(uri); //Logs the URI document.querySelector('.movies').innerHTML += track; document.getElementsByClassName('.songURI').innerHTML += uri; }) }) .catch(err => { console.error(err); });