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

Next.js encountered an API resolution issue while uploading a file, resulting in no response being

Implementing user profile picture display in express.js: A step-by-step guide

Storing JSON information in the database at a specified moment

React Component: Issue with conditional "if else" statement not refreshing in return statement

Tips on creating animations for elements that are triggered when scrolling and become visible

How can one identify a concealed glitch that exclusively occurs for a particular individual or hardware in a React environment?

Vue not displaying information from API calls

Setting a unique identifier for a newly created element in JavaScript and the DOM

"The debate over using 'stringly typed' functions, having numerous redundant functions, or utilizing TypeScript's string enums continues to divide the programming

For every item in the loop, iterate through it using PHP and

Iterate through a JSON object using JavaScript, with distinct keys but the same object structure

Learn the technique of looping through multiple HTML elements and wrapping them in Vue.js easily!

Performing two API calls using Jquery to fetch distinct dynamic elements within two nested $.each loops

What is the method to verify if a variable in ES6 is constant?

Constantly positioning the text cursor over the Textbox

Exploring nested JSON or dictionary to find multiple key values that match the defined keys

Chrome PWA debugger fails to respond when attempting to use the "add to homescreen" button

Can you explain the significance of the sentinel value NULL mentioned in the Android Developer JSONObject reference page?

Extracting a dynamic parameter from a JSON object

The public folder in Node.js is known for its tendency to encounter errors