仅使用 Javascript 从 API 获取数据

Question

我正在尝试出于学习目的从开放 API 获取数据以进行测验。我开始是从 API 获取数据，然后console.log()看看我是否做得对。我正在解析之前的 URL，foreach但出现错误：Uncaught TypeError: data.forEach is not a function这是我正在尝试的示例代码，我明白我必须在 foreach 之前先解析 JSON 但对我不起作用，也不明白为什么/** * * @GET url of the API https://opentdb.com * */// Creating a request variable with the OBJ insidevar request = new XMLHttpRequest();// Opening a GET request to the APIrequest.open("GET", "https://opentdb.com/api.php?amount=10");// Load the requestrequest.onload = function() {    // Accessing the JSON data    var data = JSON.parse(this.response);    // Checking if we have status 200 good to go otherwise error    if (request.status >= 200 && request.status < 400) {        // Looping the data        data.forEach(results => {            console.log(results.question);        });    } else {        // Showing error for the status        console.log("error");    }};// Request sendrequest.send();编辑显示来自 console.log(data)

Answer 1

仅以您的示例为例：如果您自己打开 API Url，您可以看到结果data不是array，而是object喜欢：

{

    "response_code": 0,

    "results": [

        {

            "category": "Entertainment: Film",

            "type": "multiple",

            "difficulty": "medium",

            "question": "Who played Batman in the 1997 film &quot;Batman and Robin&quot;?",

            "correct_answer": "George Clooney",

            "incorrect_answers": [

                "Michael Keaton",

                "Val Kilmer",

                "Christian Bale"

            ]

        }

    ]

}

这意味着您应该使用data.results来迭代数据。

Answer 2

 var data = JSON.parse(this.response);

    // Checking if we have status 200 good to go otherwise error

    if (request.status >= 200 && request.status < 400) {

        // Looping the data

        data.forEach(results => {

            console.log(results.question);

        });

    } else {

        // Showing error for the status

        console.log("error");

    }

};

由于您的数据不是数组，因此无法迭代，并且 forEach 函数用于迭代数组。假设您的响应包含任何数组

 responseData: {

                sc: "0000|Success",

                 clientId: "ptm",

                  reportStatus:[

                      {reportName: "sale_report", 

                          id: "275", 

                          status: "AVAILABLE"},

                          {reportName: "sale_report", 

                          id: "276", 

                          status: "PENDING"}]

}

responseData.reportStatus 获取值，然后对其进行迭代。

responseData.reportStatus.forEach((item,index,arr)=>{

  console.log(item);

})

这将带您获取数组中的所有项目。

Answer 3

  var request = new XMLHttpRequest();

    request.open("GET", "https://opentdb.com/api.php?amount=10");

   request.onload = function() {  

   var data = JSON.parse(this.response);

   if (request.status >= 200 && request.status < 400) {

    data.results.forEach(results1 => {

        console.log(results1.question);

    });

   } else {        

    console.log("error");

  }

  };

 request.send();

我已经尝试过你的代码，但你在 data 和 forEach 之间缺少结果。之后它在控制台中记录问题。