วิธีรับ 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 นี้ได้อย่างไร

คุณสามารถใช้.getJSON()ฟังก์ชั่น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
});

หากคุณไม่ต้องการใช้ jQuery คุณควรดูคำตอบนี้เพื่อหาโซลูชัน JS บริสุทธิ์: https://stackoverflow.com/a/2499647/1361042

ถ้าคุณต้องการที่จะทำมันในจาวาสคริปต์ธรรมดาคุณสามารถกำหนดฟังก์ชั่นเช่นนี้:

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

ด้วย Chrome, Firefox, Safari, Edge และ Webview คุณสามารถใช้ API การดึงข้อมูลซึ่งทำให้ง่ายขึ้นมาก

หากคุณต้องการการสนับสนุนสำหรับ IE หรือเบราว์เซอร์รุ่นเก่าคุณสามารถใช้การดึงข้อมูลโพลีฟิลได้

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

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

MDN: Fetch API

แม้ว่า Node.js ไม่มีเมธอดนี้อยู่ภายในคุณสามารถใช้การดึงข้อมูลโหนดซึ่งอนุญาตให้มีการนำไปปฏิบัติแบบเดียวกัน

ลอง 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();

คุณสามารถจัดการข้อผิดพลาดด้วยการลองจับ

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เป็นลูกค้า HTTP สัญญาที่ใช้สำหรับเบราว์เซอร์และ Node.js

มันมีการแปลงโดยอัตโนมัติสำหรับข้อมูล JSON และเป็นคำแนะนำอย่างเป็นทางการจากทีม Vue.jsเมื่อโอนย้ายจากเวอร์ชัน 1.0 ซึ่งรวมถึงไคลเอนต์ REST โดยค่าเริ่มต้น

ดำเนินการGETตามคำขอ

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

หรือแม้แต่axios(url)เพียงพอก็ต่อเมื่อGETคำขอเป็นค่าเริ่มต้น

กำหนดฟังก์ชั่นเช่น:

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

จากนั้นใช้แบบนี้:

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

});

เช้านี้ฉันยังมีข้อสงสัยเหมือนเดิมและตอนนี้ฉันได้ล้างมันใช้ JSON ด้วย 'open-weather-map' ( https://openweathermap.org/ ) api และรับข้อมูลจาก URL ในไฟล์ index.html รหัสมีลักษณะดังนี้: -

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

ฉันให้รหัส api อย่างเปิดเผยเพราะฉันมีการสมัครฟรีเพียงแค่สมัครสมาชิกฟรีในตอนแรก คุณสามารถหารหัส API และคีย์ฟรีที่ "rapidapi.com"

คุณสามารถเข้าถึงข้อมูล JSON โดยใช้ fetch () ใน JavaScript

อัปเดตพารามิเตอร์ url ของการดึงข้อมูล () ด้วย url ของคุณ

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

หวังว่ามันจะช่วยให้มันทำงานได้อย่างสมบูรณ์แบบสำหรับฉัน

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


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