如何从iTunes API中正确提取数据？

所以我尝试使用vanilla JavaScript并从iTunes的API中获取来创建一个页面，允许用户键入一个艺术家的名字，然后编辑一个类似15个顶级结果的页面。我使用以下我取：如何从iTunes API中正确提取数据？

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

函数被调用的单击事件，我相信我可以把一切从“让returnResponse”下调到另一个函数的追加。我遇到的问题实际上是让API显示任何结果。目前，如果我输入Bruno Mars，Beethoven或U2，它不记录任何数据，当我查看状态代码时，它会显示“临时标题显示”。

有关我能做些什么来改善/改善的想法吗？

对于全码： jsfiddle

来源

2017-08-15 user8387535

你看看[这个问题]（https://stackoverflow.com/q/21177387/1048572）吗？ – Bergi

典型fetch通话将这个样子。

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

修改您的代码，看看您是否可以console.log()任何注意事项。

来源

2017-08-15 00:59:27

当响应状态不是200时，*没有获取JSON主体没有任何问题。 – Bergi

我会建议分开您的关注。使dataPull函数获得结果。这意味着您可以在其他地方使用此代码而不必更改它。

这里函数返回json对象作为承诺。

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

不，您可以调用dataPull函数并解析承诺。你会得到结果，并可以做你想做的事情。

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

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

这里是一个工作JSFiddle的链接。 https://jsfiddle.net/14w36u4n/

来源

2017-08-15 01:52:59 Bergur

如何从iTunes API中正确提取数据？

回答

相关问题