Bagaimana cara mendapatkan JSON dari URL dalam JavaScript?

URL ini mengembalikan JSON:

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

Saya mencoba ini, dan itu tidak berhasil:

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

console.log(count) // should be 1

Bagaimana saya bisa mendapatkan objek JavaScript dari respons JSON URL ini?

Anda dapat menggunakan .getJSON()fungsi jQuery :

$.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
});

Jika Anda tidak ingin menggunakan jQuery, Anda harus melihat jawaban ini untuk solusi JS murni: https://stackoverflow.com/a/2499647/1361042

Jika Anda ingin melakukannya dalam javascript biasa, Anda dapat mendefinisikan fungsi seperti ini:

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

Dan gunakan seperti ini:

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

Perhatikan bahwa itu dataadalah objek, sehingga Anda dapat mengakses atributnya tanpa harus menguraikannya.

Dengan Chrome, Firefox, Safari, Edge, dan Webview Anda dapat menggunakan fetch API asli yang membuatnya lebih mudah, dan jauh lebih singkat.

Jika Anda memerlukan dukungan untuk IE atau browser lama, Anda juga dapat menggunakan 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: Ambil API

Meskipun Node.js tidak memiliki metode ini built-in, Anda dapat menggunakan node-fetch yang memungkinkan untuk implementasi yang sama persis.

ES8 (2017) coba

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

Anda dapat menangani kesalahan dengan coba-coba

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

Axios adalah klien HTTP berdasarkan janji untuk browser dan node.js .

Ini menawarkan transformasi otomatis untuk data JSON dan itu adalah rekomendasi resmi dari tim Vue.js ketika bermigrasi dari versi 1.0 yang menyertakan klien REST secara default.

Melakukan GETpermintaan

// 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);
  });

Atau bahkan axios(url)sudah cukup karena GETpermintaan adalah default.

Tentukan fungsi seperti:

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

Kemudian gunakan seperti ini:

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

});

pagi ini, saya juga memiliki keraguan yang sama dan sekarang sudah dibersihkan saya baru saja menggunakan JSON dengan 'open-weather-map' ( https://openweathermap.org/ ) api dan mendapatkan data dari URL di file index.html, kode terlihat seperti ini: -

 //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>

Saya telah memberikan kunci api secara terbuka karena saya memiliki langganan gratis, hanya memiliki langganan gratis di awal. Anda dapat menemukan api dan kunci gratis yang bagus di "rapidapi.com"

Anda dapat mengakses data JSON dengan menggunakan fetch () di JavaScript

Perbarui parameter url ambil () dengan url Anda.

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

Semoga ini bisa membantu, itu bekerja dengan baik untuk saya.

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


//Pending
const fetchPromise = fetch(url);
console.log(fetchPromise);