如何从iTunes API正确获取数据?

时间:2017-08-15 00:49:31

标签: javascript fetch-api

所以我正在尝试使用vanilla JavaScript并从iTunes的API中进行提取,以创建一个页面,允许用户输入艺术家名称,然后编译一个包含15个顶级结果的页面。我正在使用以下内容进行获取:

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

在click事件中调用该函数,我确信我可以将“let returnResponse”中的所有内容放到另一个函数的append中。我遇到的问题实际上是让API显示任何结果。目前,如果我输入Bruno Mars,Beethoven或U2,它不会记录任何数据,当我查看状态代码时,它会显示“已显示临时标题”。

有什么想法,我可以做些什么来改善/工作?

完整代码: jsfiddle

2 个答案:

答案 0 :(得分:0)

典型的fetch电话看起来像这样。

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

修改您的代码,看看您是否console.log()可以注意到任何内容。

答案 1 :(得分:0)

我会建议分开你的担忧。使dataPull函数得到结果。这意味着您可以在其他地方使用此代码而无需更改。

这里函数将json对象作为promise返回。

struct Questions {
    var Question: String
    var answer: Int
    var answers: [String]
}

class GameScreen: UIViewController {

var correctAnswer = 0
var fullQuestions: [Questions] = []

func RandomQuestionGenerator(){
    let randomQuestion = 
Int(arc4random_uniform(UInt32(fullQuestions.count)))
    var currentQuestion = fullQuestions[randomQuestion]
    correctAnswer = currentQuestion.answer

不,您可以调用dataPull函数并解决承诺。你将得到结果,并可以用它做你想做的事。

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

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