仅使用 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 inside

var request = new XMLHttpRequest();

// Opening a GET request to the API

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

// Load the request

request.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 send

request.send();

编辑显示来自 console.log(data)

Answer 1

仅以您的示例为例：如果您自己打开 API Url，您可以看到结果data不是array，而是object喜欢：{&nbsp; &nbsp; "response_code": 0,&nbsp; &nbsp; "results": [&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "category": "Entertainment: Film",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "type": "multiple",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "difficulty": "medium",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "question": "Who played Batman in the 1997 film &quot;Batman and Robin&quot;?",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "correct_answer": "George Clooney",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "incorrect_answers": [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "Michael Keaton",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "Val Kilmer",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "Christian Bale"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; ]}这意味着您应该使用data.results来迭代数据。

Answer 2

&nbsp;var data = JSON.parse(this.response);&nbsp; &nbsp; // Checking if we have status 200 good to go otherwise error&nbsp; &nbsp; if (request.status >= 200 && request.status < 400) {&nbsp; &nbsp; &nbsp; &nbsp; // Looping the data&nbsp; &nbsp; &nbsp; &nbsp; data.forEach(results => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(results.question);&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; // Showing error for the status&nbsp; &nbsp; &nbsp; &nbsp; console.log("error");&nbsp; &nbsp; }};由于您的数据不是数组，因此无法迭代，并且 forEach 函数用于迭代数组。假设您的响应包含任何数组&nbsp;responseData: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sc: "0000|Success",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;clientId: "ptm",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; reportStatus:[&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {reportName: "sale_report",&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: "275",&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; status: "AVAILABLE"},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {reportName: "sale_report",&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: "276",&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; status: "PENDING"}]}responseData.reportStatus 获取值，然后对其进行迭代。responseData.reportStatus.forEach((item,index,arr)=>{&nbsp; console.log(item);})这将带您获取数组中的所有项目。

Answer 3

&nbsp; var request = new XMLHttpRequest();&nbsp; &nbsp; request.open("GET", "https://opentdb.com/api.php?amount=10");&nbsp; &nbsp;request.onload = function() {&nbsp;&nbsp;&nbsp; &nbsp;var data = JSON.parse(this.response);&nbsp; &nbsp;if (request.status >= 200 && request.status < 400) {&nbsp; &nbsp; data.results.forEach(results1 => {&nbsp; &nbsp; &nbsp; &nbsp; console.log(results1.question);&nbsp; &nbsp; });&nbsp; &nbsp;} else {&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; console.log("error");&nbsp; }&nbsp; };&nbsp;request.send();我已经尝试过你的代码，但你在 data 和 forEach 之间缺少结果。之后它在控制台中记录问题。