Hướng dẫn how to read json file from url in javascript - cách đọc tệp 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 thế 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?

Được hỏi ngày 17 tháng 9 năm 2012 lúc 13:34Sep 17, 2012 at 13:34

2

Bạn có thể sử dụng chức năng jQuery

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

console.log(count) // should be 1

$.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.

Varun W.

2322 Huy hiệu bạc12 Huy hiệu Đồng2 silver badges12 bronze badges

Đã trả lời ngày 17 tháng 9 năm 2012 lúc 13:37Sep 17, 2012 at 13:37

Dan Barzilaydan BarzilayDan Barzilay

4.8743 huy hiệu vàng26 Huy hiệu bạc39 Huy hiệu đồng3 gold badges26 silver badges39 bronze badges

3

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

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

console.log(count) // should be 1

Đã trả lời ngày 13 tháng 3 năm 2016 lúc 13:34Mar 13, 2016 at 13:34

Robin Hartmannrobin HartmannRobin Hartmann

Phim thương hiệu vàng 2,00911 gold badge14 silver badges24 bronze badges

6

Với Chrome, Firefox, Safari, Edge và WebView, bạn có thể sử dụng API tìm nạp, điều này giúp điều này dễ dàng hơn rất nhiều và ngắn gọn hơn nhiều.

Nếu bạn cần hỗ trợ cho các trình duyệt IE hoặc 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: API tìm nạp

Mặc dù Node.js không có phương thức này được tích hợp, bạn có thể sử dụng Node Fetch cho phép triển khai chính xác.

Đã trả lời ngày 3 tháng 4 năm 2017 lúc 2:43Apr 3, 2017 at 2:43

6

ES8 (2017) Hãy thử

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

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

Đã trả lời ngày 21 tháng 4 năm 2019 lúc 16:27Apr 21, 2019 at 16:27

Kamil Kiełczewskikamil KiełczewskiKamil Kiełczewski

77.4K27 Huy hiệu vàng340 Huy hiệu bạc319 Huy hiệu đồng27 gold badges340 silver badges319 bronze badges

1

Axios là một ứng dụng khách HTTP dựa trên lời hứa 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à đề xuất chính thức từ nhóm Vue.js khi di chuyển từ phiên bản 1.0 bao gồm một máy khách REST theo mặc định.

Thực hiện yêu cầu

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

console.log(count) // should be 1

9

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

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

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

console.log(count) // should be 1

Đã trả lời ngày 6 tháng 4 năm 2018 lúc 23:08Apr 6, 2018 at 23:08

Emile Bergeronemile BergeronEmile Bergeron

16,5K4 Huy hiệu vàng76 Huy hiệu bạc123 Huy hiệu đồng4 gold badges76 silver badges123 bronze badges

Xác định một chức năng 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])

});

Đã trả lời ngày 19 tháng 3 năm 2018 lúc 19:48Mar 19, 2018 at 19:48

Dan Alboteanudan AlboteanuDan Alboteanu

8.6161 Huy hiệu vàng47 Huy hiệu bạc39 Huy hiệu đồng1 gold badge47 silver badges39 bronze badges

3

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

console.log(count) // should be 1

Đã trả lời ngày 23 tháng 8 năm 2019 lúc 6:11Aug 23, 2019 at 6:11

zq-jhonzq-jhonzq-jhon

991 Huy hiệu bạc7 Huy hiệu đồng1 silver badge7 bronze badges

3

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

console.log(count) // should be 1

Đã trả lời ngày 23 tháng 8 năm 2019 lúc 11:06Aug 23, 2019 at 11:06

Ashish Bandiwarashish Bandiwarashish bandiwar

3781 Huy hiệu vàng3 Huy hiệu bạc12 Huy hiệu đồng1 gold badge3 silver badges12 bronze badges

2

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

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

console.log(count) // should be 1

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

console.log(count) // should be 1

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

Đã trả lời ngày 12 tháng 6 năm 2020 lúc 9:48Jun 12, 2020 at 9:48

Như @danalboteanu trả lời trong trang này và một số lỗi của JavaScript Mã được đề xuất của tôi là:

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

console.log(count) // should be 1

và Phương thức Fetchrestaurant là (vui lòng thay thế URL JSON của bạn bằng {URL dữ liệu JSON của bạn}):

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

console.log(count) // should be 1

Đã trả lời ngày 27 tháng 4 năm 2021 lúc 14:29Apr 27, 2021 at 14:29

Ali Rasouliali RasouliAli Rasouli

1.58717 Huy hiệu bạc24 Huy hiệu đồng17 silver badges24 bronze badges

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 () với URL của bạn.

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

console.log(count) // should be 1

Hy vọng nó sẽ giúp, nó hoạt động hoàn hảo cho tôi.

Đã trả lời ngày 21 tháng 5 năm 2019 lúc 14:53May 21, 2019 at 14:53

1

Làm cách nào để lấy dữ liệu JSON từ URL?

Làm cách nào để mở tệp JSON trong JavaScript?

Chúng ta có thể đọc dữ liệu JSON trực tiếp từ dịch vụ web qua HTTP không?

Làm cách nào để đọc tệp JSON?