219

此 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 对象？

4

11 回答 11

210

您可以使用 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) {
    // JSON result in `data` variable
});

如果您不想使用 jQuery，您应该查看纯 JS 解决方案的答案。

于 2012-09-17T13:37:29.813 回答
175

如果你想用纯 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是一个对象，因此您无需解析即可访问其属性。

于 2016-03-13T13:34:11.823 回答
116

使用 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来实现完全相同的实现。

于 2017-04-03T02:43:03.313 回答
27

ES8(2017) 尝试

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


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

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

async function load() {
    let url = 'http://query.yahooapis.com/v1/publ...';
    let obj = null;
    
    try {
        obj = await (await fetch(url)).json();
    } catch(e) {
        console.log('error');
    }
    
    console.log(obj);
}

load();

于 2019-04-21T16:27:15.500 回答
8

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

它为 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请求是默认设置。

于 2018-04-06T23:08:58.487 回答
7

定义一个函数，如：

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])

});
于 2018-03-19T19:48:14.133 回答
1 

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

fetchDataAsync('paste URL');

于 2019-08-23T06:11:23.540 回答
0

今天早上，我也有同样的疑问，现在它被清除了，我刚刚使用 JSON 和 'open-weather-map'( https://openweathermap.org/ ) api 并从 index.html 文件中的 URL 获取数据，代码如下所示：-

 //got location
 var x = document.getElementById("demo");
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(weatherdata);
      } else { 
        x.innerHTML = "Geolocation is not supported by this browser.";
      }
    //fetch openweather map url with api key
    function weatherdata(position) {
//put corrdinates to get weather data of that location
      fetch('https://api.openweathermap.org/data/2.5/weather?lat='+position.coords.latitude+'&lon='+position.coords.longitude+'&appid=b2c336bb5abf01acc0bbb8947211fbc6')
      .then(response => response.json())
      .then(data => {
      console.log(data);
      document.getElementById("demo").innerHTML = 
      '<br>wind speed:-'+data.wind.speed + 
      '<br>humidity :-'+data.main.humidity + 
      '<br>temprature :-'+data.main.temp  
      });
    }
  <div id="demo"></div>

我公开了 api 密钥，因为我有免费订阅，刚开始时有免费订阅。你可以在“rapidapi.com”找到一些不错的免费 API 和密钥

于 2020-06-12T09:48:19.883 回答
0

作为此页面中的@DanAlboteanu 答案以及该javascript的一些错误校正，我建议的代码是：

fetchRestaurants((error, data) => {
    if (error)
        console.log(error); 
    else
        console.log(data)

});

并且 fetchRestaurants 方法是（请将您的 json url 替换为 {your url of json data}）：

function fetchRestaurants(callback) {
    fetch("{your url of json data}")
       .then(response => response.json())
       .then(json => callback(null, json))
       .catch(error => callback(error, null))
}
于 2021-04-27T14:29:49.893 回答
-1 
//Resolved
const fetchPromise1 = fetch(url);
    fetchPromise1.then(response => {
      console.log(response);
    });


//Pending
const fetchPromise = fetch(url);
console.log(fetchPromise);
于 2019-08-23T11:06:49.830 回答
-2

您可以在 JavaScript 中使用 fetch() 访问 JSON 数据

使用您的 url 更新 fetch() 的 url 参数。

fetch(url)
    .then(function(response){
        return response.json();
    })
    .then(function(data){
        console.log(data);
    })

希望它有帮助，它对我来说非常有效。

于 2019-05-21T14:53:53.390 回答