Get data from an API using only Javascript

Question

I'm trying for learning purposes to get data from an open API for quizzes.

What I started is to get the data from API and in console.log() see if I'm doing right. I'm parsing the URL before the foreachbut I'm getting the error:

Uncaught TypeError: data.forEach is not a function

This is the sample code I'm trying and I understood that I have to parse the JSON first before the foreach but is not working for me and cannot see why

/**
 *
 * @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();

EDIT Showing the asked data content from console.log(data)

For future reference: Your error message gives you a big clue. data.forEach is not a function. forEach is a function only on arrays, so that means your data object is not an array, so you should look to see what it is. — James
– James, Commented Oct 18, 2019 at 9:34

Cagatay Ulubay · Accepted Answer · 2019-10-18 08:47:29Z

3

Speaking just for your example: If you open the API Url yourself, you can see that the resulting data is not an array, but an object like:

{
    "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"
            ]
        }
    ]
}

That means you should use data.results to itterate over the data.

answered Oct 18, 2019 at 8:47

Cagatay Ulubay

2,5591 gold badge17 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jakub Over a year ago

Where I should use data.results? ``` data.forEach(data.results => { console.log(results.question); }); ``` This not work

Ayushi Keshri Over a year ago

data.results.forEach(item=>{console.log(item)}) this will work fine

Bilal Siddiqui · Accepted Answer · 2019-10-18 08:56:16Z

1

Seems you are accessing whole response, instead get results this.response.results:

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

if (request.status >= 200 && request.status < 400) {
    data.forEach(results => {
        console.log(results.question);
    });
}

edited Oct 18, 2019 at 8:56

answered Oct 18, 2019 at 8:46

Bilal Siddiqui

3,6491 gold badge16 silver badges22 bronze badges

3 Comments

ADyson Over a year ago

I don't see a "data" property within that returned object

Jakub Over a year ago

This is not working and not seems to be an aright solution.

Bilal Siddiqui Over a year ago

@jacub I have updated with results as initially there was no screenshot attached. data was a guess.

ADyson · Accepted Answer · 2019-10-18 08:58:14Z

1

The data you're getting back from the server is an object, not an array. .forEach is only available on arrays.

However there is an array within that data called "results", and the objects within that contain the "question" properties which you're interested in.

So the fix is simple, just iterate over the "results" array instead:

data.results.forEach(result => {
  console.log(result.question);
});

answered Oct 18, 2019 at 8:58

ADyson

62.9k16 gold badges86 silver badges100 bronze badges

Comments

Ayushi Keshri · Accepted Answer · 2019-10-18 09:02:47Z

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

Since your data is not an array it cant irterate and forEach function is used to iterater over an array. Assuming your response consists any array as

 responseData: {
                sc: "0000|Success",
                 clientId: "ptm",
                  reportStatus:[
                      {reportName: "sale_report", 
                          id: "275", 
                          status: "AVAILABLE"},
                          {reportName: "sale_report", 
                          id: "276", 
                          status: "PENDING"}]
}

responseData.reportStatus fetch the value and then iterate over it.

responseData.reportStatus.forEach((item,index,arr)=>{
  console.log(item);
})

this will fetch you with all the items inside array.

Ankit Verma · Accepted Answer · 2019-10-18 09:29:47Z

I have modified the code actually you are looping on wrong property you should loop on the results.

 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 response = 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
        var data = response.results;
        data.forEach(results => {
          console.log(results.question);
        });
      } else {
        // Showing error for the status
        console.log("error");
      }
    };
    // Request send
    request.send();

Working code is at below https://codesandbox.io/s/white-breeze-8w8jy

chandra prakash kabra · Accepted Answer · 2019-10-18 09:55:22Z

1

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

I have tried your code and you are missing results between data and forEach. After that it is logging question in console.

answered Oct 18, 2019 at 9:55

chandra prakash kabra

3411 gold badge3 silver badges15 bronze badges

Collectives™ on Stack Overflow

Get data from an API using only Javascript

6 Answers 6

2 Comments

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related