Establishing a connection to a JSON API to retrieve and process

Question

Establishing a connection to a JSON API to retrieve and process

I am trying to extract all instances of names from this page: .

For guidance, I have been using this tutorial as a reference: . However, when I run the code provided, it doesn't return anything. What could be going wrong?

var request = new XMLHttpRequest();

request.open('GET', 'api.openparliament.ca/politicians/?format=json', true);
request.onload = function () {

  // Accessing JSON data
  var data = JSON.parse(this.response);
  if (request.status >= 200 && request.status < 400) {
    data.forEach(politician => {
      console.log(politician.name);
    });
  } else {
    console.log('Error');
  }
}

request.send();

javascript json api

Answer 1

Answer №1

Greetings Sean and welcome to StackOverflow.

It appears that there are a few issues in your code that need to be addressed.

Make sure to include http:// in the URL within this line of code:

request.open('GET', 'http://api.openparliament.ca/politicians/?format=json', true);

.

You should wait for the XMLHttpRequest.readyState to reach DONE. You can check the readyState property like this:

if (request.readyState === 4) {
    // Your code goes here...
}

Ensure that the XMLHttpRequest returns a status code of 200. You can do this by checking:

if (request.status === 200) {
    // Your code goes here...
}

Following that, you can use the following code:

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

Here, data is an object with two properties: objects (an array of objects) and pagination (an object).

You can then iterate through the array of objects like so:

data.objects.forEach(politician => {
  console.log(politician.name);
});

Feel free to refer to the complete demo below for more clarity:

(function() {

  var request = new XMLHttpRequest();
  request.open('GET', 'http://api.openparliament.ca/politicians/?format=json', true);
  request.onreadystatechange = function() {
    if (request.readyState === 4) {
      if (request.status === 200) {
        var data = JSON.parse(this.response);
        data.objects.forEach(politician => {
          console.log(politician.name);
        });
      } else {
        console.log('error');
      }
    }
  }

  request.send();
}());

I hope this information proves helpful.

Answer 2

Greetings Sean and welcome to StackOverflow.

It appears that there are a few issues in your code that need to be addressed.

Make sure to include http:// in the URL within this line of code:

request.open('GET', 'http://api.openparliament.ca/politicians/?format=json', true);

.

You should wait for the XMLHttpRequest.readyState to reach DONE. You can check the readyState property like this:

if (request.readyState === 4) {
    // Your code goes here...
}

Ensure that the XMLHttpRequest returns a status code of 200. You can do this by checking:

if (request.status === 200) {
    // Your code goes here...
}

Following that, you can use the following code:

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

Here, data is an object with two properties: objects (an array of objects) and pagination (an object).

You can then iterate through the array of objects like so:

data.objects.forEach(politician => {
  console.log(politician.name);
});

Feel free to refer to the complete demo below for more clarity:

(function() {

  var request = new XMLHttpRequest();
  request.open('GET', 'http://api.openparliament.ca/politicians/?format=json', true);
  request.onreadystatechange = function() {
    if (request.readyState === 4) {
      if (request.status === 200) {
        var data = JSON.parse(this.response);
        data.objects.forEach(politician => {
          console.log(politician.name);
        });
      } else {
        console.log('error');
      }
    }
  }

  request.send();
}());

I hope this information proves helpful.

Establishing a connection to a JSON API to retrieve and process

Answer №1

Similar questions

React - Issue with Input event handling when utilizing both onChange and onKeyDown functions

resolved after a new promise returned nothing (console.log will output undefined)

The integration of a side panel with a chrome extension is experiencing issues

how can I transfer model values to a dashboard in Rails 5?

`I'm experiencing difficulty sending JSON data to Typeahead using PHP`

Leverage videojs-vr within a Vue.js component

Is it possible for the binding model of Mat-Checkbox to be optional or null?

Ways To Obtain Trustworthy Dates Using JavaScript

What is the best way to personalize the collector for each individual?

Having issues with deserializing boolean data types from a JSON file in Python

Creating a POST request in Rails 3

Error encountered while attempting to save a Mongoose post on Heroku, although it is successful

Is the DOMContentLoaded event connected to the creation of the DOM tree or the rendering tree?

Customizing error messages in Joi validationorHow to show custom

Encountering an ENOENT error while attempting to incorporate a style guide into next.js (react)

Unable to Display Embed Request Using Javascript in IE9 and IE10

Can a single endpoint provide various JSON responses depending on the user's role?

What is the best way to retrieve the final entry from a JSON file while using json server with Angular?

Efficient way to handle nested variables in templates with Nunjucks or alternative approaches

Consolidating repeated data objects found in the response