0

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>`;
        })

    }
1
  • Cuando haces una pregunta de este estilo, es necesario que aportes un ejemplo mínimo verificable. Se supone que tengo que inventarme el html que acompaña a tu código para poder ver qué haces?? Sería mucho mas fácil ayudarte si pudiese copiar y pegar el código y ver todo funcionando directamente que tener que hacer yo algo, que luego puede no ser lo mismo que hiciste tú...
    – Benito-B
    Commented el 31 ene. 2021 a las 15:20

2 respuestas 2

0

Disculpad por mi ignorancia es la primera vez que escribo. Os mando el archivo para ejecutar. He resuelto en parte el tema...pero....no del todo bien. Pues al pulsar el botón en la página, no saca el resultado correcto, vuelvo a pulsar y si lo saca. Que está pasando? Gracias. Dejo el codigo aqui para ejecutar pero no se si funcionará. Los dos archivos HTML y JS están completos. Para probar. usar por Ejemplo: Pop

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')


let valorID;


apiBtn.addEventListener('click', enviarDatos);

function enviarDatos(e) {


  consultarApiArtistas(valorID)
  consultarApiGenero()

}

function consultarApiGenero() {

  const url = 'https://api.deezer.com/genre';

  fetch(url)
    .then(respuesta => respuesta.json())
    .then(resultado => {
      mostrarGenero(resultado.data)
    })
}

function consultarApiArtistas(valorID) {
  limpiarHtml();
  const url = 'https://api.deezer.com/genre/' + valorID + '/artists';
  fetch(url)
    .then(respuesta => respuesta.json())
    .then(resultado => {
      //console.log(resultado)
      mostrarInfo(resultado.data)
    })
}

function mostrarGenero(generos) {
  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>`;*/

    if (datoIn.value === genero.name) {
      valorID = genero.id.toString();
    }
  })
}

function mostrarInfo(artistas) {
  artistas.forEach(dato => {
    const {
      name,
      picture_medium
    } = dato;
    //SIEMPRE CREAR UN <DIV>
    contenedor.innerHTML += `
        <div>
        <p> ${name}</p>
        <img class="w-full" src=${picture_medium} alt={tags} />
        </div>`;
  });
}

function limpiarHtml() {
  while (contenedor.firstChild) {
    contenedor.removeChild(contenedor.firstChild)

  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href='style.css'>
  <title>Demo_API</title>
</head>

<body>
  <div>
    <div>
      <label for dataIn>Introduce el Genero</label>
      <input id='dataIn' type="text">

      <button type="button" id='botonApi'>Api GET</button>
    </div>
    <div>
      <img style='margin-top: 20px;' id='imagen1'>

    </div>
    <div id='container'>
      <!--aquí van las cosas-->


    </div>
  </div>

  <script src='generos.js'></script>

</body>

</html>

1
  • Creo que me respondo a mi mismo. Lo que ocurre, es que la primera vez llamo a la API y esta itera, y la segunda tomando el valor que yo inroduzco en el datoIn.value, vuelve a llamar a la API y me muestra el listado correcto. Entiendo que es la manera de listar de la API, lo suyo sería tener ya almacenados en la página los valores de Id, para que la primera vez ya pasemos el valor a la API y devuelva el listado correcto. Commented el 31 ene. 2021 a las 16:48
0

No estoy muy seguro de haber entendido tu pregunta, pero si lo que quieres es buscar el id de un género a partir de su nombre, dentro de un objeto con otros objetos, puedes empezar obteniendo sólo los valores del primer objeto mediante un Object.values. A continuación, filtrar por nombre utilizando un filter y acceder a la propiedad id del array filtrado.

Sería algo así:

const genres = {
  1: {
    id: 132,
    name: "Pop",
    picture: "https://api.deezer.com/genre/132/image",
    picture_small: "https://...",
    picture_medium: "https://...",
  },
  2: {
    id: 116,
    name: "Rap/Hip Hop",
    picture: "https://api.deezer.com/genre/116/image",
    picture_small: "https://...",
    picture_medium: "https://...",
  },
}

const inputValue = 'pop';
const searchGenreId = Object.values(genres).filter(
  (genre) => genre.name.toLowerCase() === inputValue.toLowerCase()
)[0]?.id || null;

console.log(searchGenreId);

1
  • Si eso, algo así es lo que he conseguido iterando dentro de un forEach, para poder buscar dentro de array que me manda la API. Pero en lugar de usar un filter, he hecho algo así: function mostrarGenero (generos) { generos.forEach( genero => { const {id, name, picture_medium}= genero; if(datoIn.value === genero.name) { valorID=genero.id.toString(); } }) } Commented el 31 ene. 2021 a las 16:09

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.