This 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对象?
答案 0 :(得分:139)
您可以使用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
答案 1 :(得分:102)
如果你想在普通的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
是一个对象,因此您无需解析就可以访问其属性。
答案 2 :(得分:56)
使用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 });
即使Node.js没有内置此方法,您也可以使用node-fetch来实现完全相同的实现。
答案 3 :(得分:4)
Axios是一个基于 promise的浏览器和node.js 的HTTP客户端。
默认情况下,从包含REST客户端的1.0版本迁移时,它为JSON数据及其the official recommendation from the Vue.js team提供自动转换。
执行
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
请求是默认的。
答案 4 :(得分:1)
功能:
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])
});
答案 5 :(得分:1)
尝试
obj = await (await fetch(url)).json();
async function get() {
let url = 'https://my-json-server.typicode.com/typicode/demo/db'
let obj = await (await fetch(url)).json();
console.log(obj);
}
<button onclick="get()">Load data</button>
答案 6 :(得分:0)
您可以通过使用JavaScript中的fetch()访问JSON数据
使用您的网址更新fetch()的网址参数。
fetch(url)
.then(function(response){
return response.json();
})
.then(function(data){
console.log(data);
})
希望它会有所帮助,对我来说效果很好。
答案 7 :(得分: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和密钥
答案 8 :(得分: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))
}
答案 9 :(得分:-1)
async function fetchDataAsync() {
const response = await fetch('paste URL');
console.log(await response.json())
}
fetchDataAsync();
答案 10 :(得分:-1)
//Resolved
const fetchPromise1 = fetch(url);
fetchPromise1.then(response => {
console.log(response);
});
//Pending
const fetchPromise = fetch(url);
console.log(fetchPromise);