Estoy trabajando con una API (la de deezer).
El caso es que lo que quiero es crear un input
, donde escribir un género de música y que el API me devuelva los artistas que tiene almacenados en ese género.
La cosa es que la API de Deezer hace esto en el GET: https://api.deezer.com/genre/132/artists.
EL valor (152) es como tiene catalogado al estilo, con un id
, por ejemplo:
1: {id: 132, name: "Pop", picture: "https://api.deezer.com/genre/132/image", picture_small: "https://cdns-images.dzcdn.net/images/misc/db7a604d9e7634a67d45cfc86b48370a/56x56-000000-80-0-0.jpg", picture_medium: "https://cdns-images.dzcdn.net/images/misc/db7a604d9e7634a67d45cfc86b48370a/250x250-000000-80-0-0.jpg", …}
2: {id: 116, name: "Rap/Hip Hop", picture: "https://api.deezer.com/genre/116/image", picture_small: "https://cdns-images.dzcdn.net/images/misc/5c27115d3b797954afff59199dad98d1/56x56-000000-80-0-0.jpg", picture_medium: "https://cdns-images.dzcdn.net/images/misc/5c27115d3b797954afff59199dad98d1/250x250-000000-80-0-0.jpg", …}
Lo que yo quiero es poner en el input
de mi página "Pop" y que el código me relacione name:Pop
con su id:132
.
Tengo hechas las iteraciones hacia la API y funcionan si pongo en el input
de mi página el id
, pero la gente no tiene por qué saber el id
. Por eso intento crear la relación entre ambos valores.
No sé por dónde tirar. Agradezco alguna orientación.
const datoIn = document.querySelector('#dataIn');
const apiBtn = document.querySelector('#botonApi');
const contenedor = document.querySelector('#container')
const imagen = document.querySelector('#imagen1')
const generoId = document.querySelector('.listadogenero')
apiBtn.addEventListener('click', enviarDatos);
function enviarDatos() {
consultarApi()
consultarApiGenero()
}
function consultarApiGenero() {
const url = 'https://api.deezer.com/genre';
fetch(url)
.then(respuesta => respuesta.json())
.then(resultado => {
console.log(resultado)
mostrarGenero(resultado.data)
})
}
function consultarApi() {
const url = 'https://api.deezer.com/genre' + '/' + datoIn.value + '/artists';
fetch(url)
.then(respuesta => respuesta.json())
.then(resultado => {
console.log(resultado)
mostrarInfo(resultado.data)
})
}
function mostrarGenero(generos) {
limpiarHtml()
generos.forEach(genero => {
const {
id,
name,
picture_medium
} = genero;
contenedor.innerHTML += `
<div>
<p> ${id} </p>
<p> ${name}</p>
<img class="w-full" src=${picture_medium} alt={tags} />
</div>`;
})
}