如何从JavaScript中的URL获取JSON?

2020/10/24 04:41 · javascript ·  · 0评论

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

您可以使用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解决方案:https : //stackoverflow.com/a/2499647/1361042

如果要使用普通的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是一个对象,因此您无需解析即可访问其属性。

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

ES8(2017)尝试

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

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

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请求就足够了,因为请求是默认的。

定义一个类似的函数:

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

});

今天早上,我也有同样的疑问,现在我已经将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和密钥

//Resolved
const fetchPromise1 = fetch(url);
    fetchPromise1.then(response => {
      console.log(response);
    });


//Pending
const fetchPromise = fetch(url);
console.log(fetchPromise);
async function fetchDataAsync() {
    const response = await fetch('paste URL');
    console.log(await response.json())

}


fetchDataAsync();

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

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

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

希望对您有帮助,对我来说效果很好。

本文地址:http://javascript.askforanswer.com/ruhecongjavascriptzhongdeurlhuoqujson.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!