Comment extraire correctement les données de l'API iTunes?

Question

J'essaie donc d'utiliser JavaScript en vanilla et de faire une recherche depuis l'API d'iTunes pour créer une page qui permet à un utilisateur de taper un nom d'artiste et de compiler ensuite une page avec les 15 meilleurs résultats. J'utilise ce qui suit pour mon ira chercher

function dataPull() { 
    fetch("https://itunes.apple.com/search?term=") 
    .then(function(response) { 
     if (response.status !== 200) { 
     console.log(response.status); 
     return; 
     } 
     response.json().then(function(data){ 
     console.log(data); 
     let returnResponse = document.createElement("div"); 
     let input2 = inputElement.value; 
     for (let i=0; i<data.length; i++){ 
      if (inputElement===data[i].artistName){ 
      console.log(data[i].artistName); 
      returnResponse.innerHTML = ` 
      <div class="box"> 
      <img src=${artWorkUrl30} alt="Album Image"> 
      <p><span>Artist Name:</span>${data[i].artistName}</p> 
      <p><span>Track: </span>${data[i].trackName}</p> 
      <p><span>Album Name: </span>${data[i].collectionName}</p> 
      <p><span>Album Price: </span>${data[i].collectionPrice</p> 
      </div> 
      `; 
      results.appendChild(returnResponse); 
     }} 
     console.log(data); 
     }); 
    } 
) 

La fonction est appelée dans un événement de clic et je suis sûr que je peux mettre tout de « laisser returnResponse » jusqu'à la append dans une autre fonction. Le problème que je rencontre est en train d'obtenir l'API pour montrer tous les résultats. En ce moment, si je tape Bruno Mars, Beethoven ou U2, il n'y a pas d'enregistrement de données et cela me donne des "en-têtes provisoires" lorsque je consulte le code d'état.

Avez-vous des idées sur ce que je pourrais faire pour améliorer ce système?

Pour le code complet: jsfiddle

Answer 1

appel typique fetch ressemblera à ceci.

fetch(`${url}`) 
    .then(response => response.json()) 
    .then(json => 
     // do something with the json 
    ) 

Modifier votre code et voyez si vous pouvez console.log() quoi que ce soit de la note.

Answer 2

Je recommanderais de séparer vos préoccupations. Faire la fonction dataPull juste obtenir les résultats. Cela signifie que vous pouvez utiliser ce code à d'autres endroits sans le changer.

Ici, la fonction renvoie l'objet json en tant que promesse.

function dataPull(search) { 
    return fetch("https://itunes.apple.com/search?term="+search).then(res => res.json()); 
} 

Non, vous pouvez appeler la fonction dataPull et résoudre la promesse. Vous aurez le résultat et pouvez faire ce que vous voulez avec.

dataPull("test").then(res => { 
    console.log(res.results); 

    /* 
    res.results.forEach(item => { 
    div and span magic here 
    }) 
    */ 
}) 

Voici un lien vers un JSFiddle actif. https://jsfiddle.net/14w36u4n/