Làm cách nào để lấy JSON từ URL trong JavaScript?

URL này trả về JSON:

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

Tôi đã thử điều này và nó đã không hoạt động:

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

console.log(count) // should be 1

Làm cách nào tôi có thể nhận được một đối tượng JavaScript từ phản hồi JSON của URL này?

Bạn có thể sử dụng .getJSON()chức năng 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
});

Nếu bạn không muốn sử dụng jQuery, bạn nên xem câu trả lời này cho giải pháp JS thuần túy: https://stackoverflow.com/a/2499647/1361042

Nếu bạn muốn làm điều đó trong javascript đơn giản, bạn có thể xác định một chức năng như thế này:

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

Và sử dụng nó như thế này:

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

Lưu ý rằng đó datalà một đối tượng, vì vậy bạn có thể truy cập các thuộc tính của nó mà không cần phải phân tích cú pháp.

Với Chrome, Firefox, Safari, Edge và Webview, bạn có thể sử dụng API tìm nạp một cách tự nhiên, điều này làm cho việc này dễ dàng hơn và ngắn gọn hơn nhiều.

Nếu bạn cần hỗ trợ cho IE hoặc các trình duyệt cũ hơn, bạn cũng có thể sử dụng polyfill tìm nạp .

let url = 'https://example.com';

fetch(url)
.then(res => res.json())
.then((out) => {
  console.log('Checkout this JSON! ', out);
})
.catch(err => { throw err });

MDN: Tìm nạp API

Mặc dù Node.js không tích hợp sẵn phương thức này, bạn có thể sử dụng tìm nạp nút cho phép thực hiện chính xác như vậy.

Hãy thử 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();

bạn có thể xử lý lỗi bằng cách thử

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 là một lời hứa dựa client HTTP cho trình duyệt và Node.js .

Nó cung cấp các biến đổi tự động cho dữ liệu JSON và đó là khuyến nghị chính thức từ nhóm Vue.js khi di chuyển từ phiên bản 1.0 bao gồm máy khách REST theo mặc định.

Thực hiện một GETyêu cầu

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

Hoặc thậm chí chỉ axios(url)là đủ vì một GETyêu cầu là mặc định.

Xác định hàm như:

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

Sau đó sử dụng nó như thế này:

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

});

sáng nay, tôi cũng có nghi ngờ tương tự và bây giờ nó đã được xóa, tôi vừa sử dụng JSON với 'bản đồ thời tiết mở' ( https://openweathermap.org/ ) api và nhận dữ liệu từ URL trong tệp index.html, mã trông như thế này: -

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

tôi đã cung cấp khóa api một cách công khai vì tôi đã đăng ký miễn phí, chỉ cần đăng ký miễn phí ngay từ đầu. bạn có thể tìm thấy một số api và chìa khóa miễn phí tốt tại "quickapi.com"

Bạn có thể truy cập dữ liệu JSON bằng cách sử dụng fetch () trong JavaScript

Cập nhật tham số url của fetch () bằng url của bạn.

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

Hy vọng nó giúp, nó làm việc hoàn hảo cho tôi.

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


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