Deze URL retourneert JSON:
{
query: {
count: 1,
created: "2015-12-09T17:12:09Z",
lang: "en-US",
diagnostics: {},
...
}
}
Ik heb dit geprobeerd en het werkte niet:
responseObj = readJsonFromUrl('https://query.yahooapis.com/v1/publ...');
var count = responseObj.query.count;
console.log(count) // should be 1
Hoe kan ik een JavaScript-object uit de JSON-reactie van deze URL halen?
Antwoord 1, autoriteit 100%
Je kunt de jQuery .getJSON()
-functie gebruiken:
$.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
});
Als je jQuery niet wilt gebruiken, moet je dit antwoord voor pure JS-oplossing bekijken: https://stackoverflow.com /a/2499647/1361042
Antwoord 2, autoriteit 84%
Als je het in gewoon javascript wilt doen, kun je een functie als volgt definiëren:
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();
};
En gebruik het als volgt:
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);
}
});
Houd er rekening mee dat data
een object is, dus je hebt toegang tot de attributen zonder het te hoeven ontleden.
Antwoord 3, autoriteit 53%
Met Chrome, Firefox, Safari, Edge en Webview kun je native de fetch-API gebruiken, wat dit een stuk eenvoudiger en veel beknopter maakt.
Als je ondersteuning nodig hebt voor IE of oudere browsers, kun je ook de 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);
Hoewel Node.js deze methode niet ingebouwd heeft, kunt u node- fetch wat exact dezelfde implementatie mogelijk maakt.
Antwoord 4, autoriteit 11%
ES8(2017) proberen
obj = await (await fetch(url)).json();
Antwoord 5, autoriteit 4%
Axios is een op belofte gebaseerde HTTP-client voor de browser en node.js.
Het biedt automatische transformaties voor JSON-gegevens en het is de officiële aanbeveling van de Vue.js-team bij het migreren van de 1.0-versie die standaard een REST-client bevatte.
Een
GET
-verzoek uitvoeren// 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); });
Of zelfs gewoon axios(url)
is genoeg, aangezien een GET
-verzoek de standaard is.
Antwoord 6, autoriteit 4%
Definieer een functie zoals:
fetchRestaurants(callback) {
fetch(`http://www.restaurants.com`)
.then(response => response.json())
.then(json => callback(null, json.restaurants))
.catch(error => callback(error, null))
}
Gebruik het dan als volgt:
fetchRestaurants((error, restaurants) => {
if (error)
console.log(error)
else
console.log(restaurants[0])
});
Antwoord 7
async function fetchDataAsync(url) {
const response = await fetch(url);
console.log(await response.json());
}
fetchDataAsync('paste URL');
Antwoord 8
vanmorgen had ik ook dezelfde twijfel en nu is het opgelost
ik had zojuist JSON gebruikt met ‘open-weather-map'(https://openweathermap.org/) api en kreeg gegevens van de URL in het bestand index.html,
de code ziet er als volgt uit:-
//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>
Antwoord 9
als @DanAlboteanu antwoord op deze pagina en een foutcorrectie van dat javascript is mijn voorgestelde code:
fetchRestaurants((error, data) => {
if (error)
console.log(error);
else
console.log(data)
});
en fetchRestaurants-methode is (vervang uw json-url door {uw url van json-gegevens}):
function fetchRestaurants(callback) {
fetch("{your url of json data}")
.then(response => response.json())
.then(json => callback(null, json))
.catch(error => callback(error, null))
}
Antwoord 10
//Resolved
const fetchPromise1 = fetch(url);
fetchPromise1.then(response => {
console.log(response);
});
//Pending
const fetchPromise = fetch(url);
console.log(fetchPromise);
Antwoord 11
Je hebt toegang tot JSON-gegevens door fetch() in JavaScript te gebruiken
Werk de url-parameter van fetch() bij met uw url.
fetch(url)
.then(function(response){
return response.json();
})
.then(function(data){
console.log(data);
})
Hoop dat het helpt, het werkte perfect voor mij.