วิธีดึง JSON จาก URL ใน JavaScript?

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

ฉันจะสามารถดึงวัตถุ JavaScript จากการตอบกลับ JSON ของ URL นี้ได้อย่างไร?

คำตอบ #1

คุณสามารถใช้ฟังก์ชัน 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) {
    // JSON result in `data` variable
});

ถ้าคุณไม่ต้องการใช้ jQuery คุณควรดูคำตอบนี้สำหรับโซลูชันแบบ JS ล้วน

คำตอบ #2

ถ้าคุณต้องการทำมันด้วยจาวาสคริปต์ล้วน ๆ คุณสามารถกำหนดฟังก์ชันแบบนี้ได้:

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 เป็นวัตถุ ดังนั้นคุณสามารถเข้าถึงคุณสมบัติของมันได้โดยไม่ต้องทำการแยกวิเคราะห์

คำตอบ #3

ด้วย 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 => console.log(err));

MDN: Fetch API

แม้ว่า Node.js จะไม่มีเมธอดนี้ในตัว แต่คุณสามารถใช้ node-fetch ซึ่งอนุญาตให้มีการใช้งานแบบเดียวกันได้

คำตอบ #4

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

คุณสามารถจัดการข้อผิดพลาดได้ด้วย try-catch

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