时间戳

首页 > 解决方案 > 连接 JSON API 进行解析

javascript - 连接 JSON API 进行解析

问题描述

我正在寻找解析以下页面并提取名称的每个实例。http://api.openparliament.ca/politicians/。

我一直在关注本指南以供参考：https ://www.taniarascia.com/how-to-connect-to-an-api-with-javascript/但是当它运行时，没有任何返回。我究竟做错了什么？

var request = new XMLHttpRequest();

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

  // Begin accessing JSON data here
  var data = JSON.parse(this.response);
  if (request.status >= 200 && request.status < 400) {
    data.forEach(politicians => {
      console.log(politicians.name);
    });
  } else {
    console.log('error');
  }
}

request.send();

标签： javascriptjsonapi

解决方案

欢迎 Sean 使用 StackOverflow。

好吧，首先你的代码中有一些问题。

  • 在此行的 URL 中添加http://request.open('GET', 'http://api.openparliament.ca/politicians/?format=json', true);：。
  • 你需要等待的XMLHttpRequest.readyState是DONE。在您的代码中，您可以通过以下方式检查 readyState 属性：
if (request.readyState === 4) {
    // Code goes here...
}
  • 检查是否XMLHttpRequest返回了 200 状态码。你可以这样做：
if (request.status === 200) {
    // Code goes here...
}

然后使用前面的代码，您可以执行以下操作：

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

wheredata是一个对象，它有两个属性：objects和paginationwhereobjects是一个对象数组，并且pagination是一个对象。

然后你可以这样做：

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

这是完整的演示：

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

希望这可以帮助。

推荐阅读