如何在Javascript中从URL获取JSON？

Question

此URL返回JSON:

{
  query: {
    count: 1,
    created: "2015-12-09T17:12:09Z",
    lang: "en-US",
    diagnostics: {},
    ...
  }
}

我试过这个,但它不起作用:

responseObj = readJsonFromUrl('http://query.yahooapis.com/v1/publ...');
var count = responseObj.query.count;

console.log(count) // should be 1

如何从此URL的JSON响应中获取JavaScript对象？

Answer 1

你可以使用jQuery .getJSON()函数:

$.getJSON('http://query.yahooapis.com/v1/public/yql?q=select%20%2a%20from%20yahoo.finance.quotes%20WHERE%20symbol%3D%27WRC%27&format=json&diagnostics=true&env=store://datatables.org/alltableswithkeys&callback', function(data) {
    //data is the JSON string
});

如果你不想使用jQuery,你应该看看纯JS解决方案的答案:https://stackoverflow.com/a/2499647/1361042

Answer 2

如果你想在普通的javascript中做,你可以定义一个这样的函数:

var getJSON = function(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'json';
    xhr.onload = function() {
      var status = xhr.status;
      if (status === 200) {
        callback(null, xhr.response);
      } else {
        callback(status, xhr.response);
      }
    };
    xhr.send();
};

并像这样使用它:

getJSON('http://query.yahooapis.com/v1/public/yql?q=select%20%2a%20from%20yahoo.finance.quotes%20WHERE%20symbol%3D%27WRC%27&format=json&diagnostics=true&env=store://datatables.org/alltableswithkeys&callback',
function(err, data) {
  if (err !== null) {
    alert('Something went wrong: ' + err);
  } else {
    alert('Your query count: ' + data.query.count);
  }
});

请注意,这data是一个对象,因此您无需解析它就可以访问其属性.

Answer 3

借助Chrome,Firefox,Safari,Edge和Webview,您可以原生使用fetch API,这样可以更轻松,更简洁.

如果您需要支持IE或旧版浏览器,您还可以使用fetch polyfill.

let url = 'https://example.com';

fetch(url)
.then(res => res.json())
.then((out) => {
  console.log('Checkout this JSON! ', out);
})
.catch(err => { throw err });

MDN:获取API

即使Node.js没有内置此方法,您也可以使用node-fetch,它允许完全相同的实现.

Answer 4

ES8(2017) 尝试

obj = await (await fetch(url)).json();

obj = await (await fetch(url)).json();

你可以通过 try-catch 处理错误

async function load() {
    let url = 'https://my-json-server.typicode.com/typicode/demo/db';
    let obj = await (await fetch(url)).json();
    console.log(obj);
}

load();

Answer 5

定义一个函数，如：

fetchRestaurants(callback) {
    fetch(`http://www.restaurants.com`)
       .then(response => response.json())
       .then(json => callback(null, json.restaurants))
       .catch(error => callback(error, null))
}

然后像这样使用它：

fetchRestaurants((error, restaurants) => {
    if (error) 
        console.log(error)
    else 
        console.log(restaurants[0])

});

Answer 6

Axios是用于浏览器和node.js的基于Promise 的HTTP客户端。

它提供了JSON数据的自动转换功能，这是Vue.js团队的正式建议，当从默认版本（包括REST客户端）的1.0版本进行迁移时。

执行GET请求

// Make a request for a user with a given ID
axios.get('http://query.yahooapis.com/v1/publ...')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

甚至仅仅axios(url)是一个GET请求就足够了，因为请求是默认的。

Answer 7

async function fetchDataAsync(url) {
    const response = await fetch(url);
    console.log(await response.json());
}

fetchDataAsync('paste URL');