जावास्क्रिप्ट में URL से JSON कैसे प्राप्त करें?

Question

यह 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

मुझे इस URL की JSON प्रतिक्रिया से जावास्क्रिप्ट ऑब्जेक्ट कैसे मिल सकता है?

Comments

आपके पास एक URL है जो JSON स्ट्रिंग युक्त प्रतिक्रिया देता है। क्या आप पूछ रहे हैं कि किसी URL से कुछ अनुरोध कैसे करें? क्योंकि यह उस भाषा या उपकरण पर बहुत अधिक निर्भर करेगा जिसका आप उपयोग कर रहे हैं। थोड़ा और विस्तार में बताओ।

— जजव

यह सवाल भ्रामक है। आपके द्वारा बताए गए URL का उपयोग करके आपको JSON ऑब्जेक्ट नहीं मिलता है? URL से JSON ऑब्जेक्ट प्राप्त करने का क्या मतलब है? कृपया स्पष्ट करें।

— स्टीवन

Answer 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 का उपयोग नहीं करना चाहते हैं तो आपको शुद्ध जेएस समाधान के लिए इस उत्तर को देखना चाहिए: https://stackoverflow.com/a/2499647/1361042

Comments

मामूली बिंदु लेकिन स्पष्ट हो सकता है अगर यह कहा गया है कि 'JSON dataचर में है'

— नाथन हॉर्बी

शुद्ध जावास्क्रिप्ट उदाहरण जो आप इंगित करते हैं, JSONP के लिए है, जो प्रश्न के साथ काम नहीं करेगा।

— सेचर

Answer 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एक वस्तु है, इसलिए आप इसे पार्स किए बिना इसकी विशेषताओं तक पहुंच सकते हैं।

Comments

.onload = function() {जब आप उपयोग कर सकते हैं .onreadystatechange = function() { if (xhr.readState === 4) {, तो मैं इसका मतलब सुनिश्चित कर सकता हूं, यह छोटा है, लेकिन आप कुछ पात्रों को बचाने के लिए बहुत सारे समर्थन का त्याग कर रहे हैं। यह कोड-गोल्फ नहीं है

— डाउनगैट

यह न केवल छोटा है, बल्कि यह इस पोस्ट के अनुसार अधिक विश्वसनीय भी है । और caniuse.com का कहना है कि यह IE8 को छोड़कर सब कुछ द्वारा समर्थित है, इसलिए जब तक आपको IE8 का समर्थन करने की आवश्यकता नहीं है, मैं नहीं देखता कि आप onload का उपयोग क्यों नहीं करेंगे।

— रॉबिन हार्टमैन

@ मायकेस्कुलिवन मैं एक बात जानना चाहता था, कि मुझे रिस्पॉन्स स्टेटस = 200 के रूप में रिस्पांस टेक्स्ट और रिस्पॉन्सएक्सएमएल अपरिभाषित क्यों मिल रहे हैं?

— हसुशी

@hrushi यदि वे अपरिभाषित हैं, तो आप उन्हें गलत तरीके से या गलत संदर्भ में एक्सेस कर रहे हैं। याद रखें, आपको xhr.responseText और xhr.responseXML का उपयोग करना होगा और वे केवल गेटजोन फ़ंक्शन डेफिनिशन ब्लॉक के भीतर उपलब्ध हैं, इसके बाहर नहीं।

— रॉबिन हार्टमैन

@MitchellD क्या आप Node.js का उपयोग कर रहे हैं? फिर यहाँ पर एक नज़र रखना । लेकिन अगली बार पहले त्रुटि के लिए प्रयास करें, मैंने जो लिंक पोस्ट किया है वह पहला परिणाम है जो Google में त्रुटि टाइप करने पर आता है।

— रॉबिन हार्टमैन

Answer 3

क्रोम, फ़ायरफ़ॉक्स, सफारी, एज, और वेबव्यू के साथ आप मूल रूप से लाने के लिए उपयोग कर सकते हैं एपीआई एपीआई जो इसे बहुत आसान बनाता है, और बहुत अधिक छंद।

यदि आपको 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 में यह पद्धति बिल्ट-इन न हो, लेकिन आप नोड-भ्रूण का उपयोग कर सकते हैं जो सटीक समान कार्यान्वयन के लिए अनुमति देता है।

Comments

उह .. यह भी IE11 में संकलन नहीं है। क्यों IE इस तरह के कबाड़ है?

— डैनो

इस समस्या को दूर करने के लिए आप हमेशा github / fetch polyfill का उपयोग कर सकते हैं।

— DBrown

@dano यह एरो फ़ंक्शंस है। नियमित कार्यों या बबेल को ट्रांसपाइल करने के लिए उपयोग करें

— फिल

@ ईएस 6 को इंगित करने के लिए धन्यवाद। IE11 के साथ सबसे बड़ा मुद्दा यह है कि भ्रूण एक समर्थित एपीआई नहीं है: developer.mozilla.org/en-US/docs/Web/API/Fetch_API यह भी पता होना चाहिए कि IE11 के लिए आवश्यक भ्रूण पॉलीफिल विशुद्ध रूप से ES5 (अभाव के कारण) है समर्थन), इसलिए ES6 वाष्पीकरण की कोई वास्तविक आवश्यकता नहीं है जब तक कि आपको इसकी अन्यथा आवश्यकता न हो। यदि इसे जोड़ने का एकमात्र कारण है, तो मुहावरे का समर्थन करना (यदि पॉलीफ़िल भी इसका समर्थन करता है), तो बैबल-पॉलीफ़िल का उपयोग करना एक बेहतर विकल्प है। शुभकामनाएँ!

— 21

Answer 4

ईएस 8 (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();

Answer 5

Axios ब्राउज़र और node.js के लिए एक वादा आधारित HTTP क्लाइंट है ।

यह JSON डेटा के लिए स्वचालित रूप से परिवर्तन प्रदान करता है और यह 1.0 संस्करण से माइग्रेट करते समय Vue.js टीम की आधिकारिक सिफारिश है जिसमें डिफ़ॉल्ट रूप से 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अनुरोध के रूप में पर्याप्त है डिफ़ॉल्ट।

Answer 6

एक फ़ंक्शन को परिभाषित करें:

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])

});

Comments

यह देखते हुए कि कई मौजूदा उत्तर हैं, कृपया उल्लेख करें कि इस उत्तर के बारे में क्या चर्चा के लायक है। कई मौजूदा उत्तरों में भ्रूण के उपयोग का उल्लेख किया गया है।

— टूलमेकरसैट

यह 2020 में एकमात्र प्रासंगिक उत्तर है। यह केवल एक भ्रूण है जिसे एक अतुल्यकालिक घटना पूरी होने पर कॉलबैक की आवश्यकता होती है। आसान और सुरुचिपूर्ण

— lesolorzanov

fetchइस मामले में प्रतीक्षित क्यों नहीं है ? मैं भ्रमित हूं, मैं ऐसे उदाहरण देख रहा हूं जहां यह प्रतीक्षित है और स्पष्ट रूप से कहा जा रहा है

— पिंचिया

Answer 7

आज सुबह, मुझे भी यही संदेह था और अब इसका क्लीयर मैंने JSON को 'ओपन-वेदर-मैप-मैप' ( https://openweathermap.org/ ) एपीआई के साथ किया था और एपीआई से इंडेक्स.नेट फ़ाइल में URL से डेटा प्राप्त किया था, कोड इस तरह दिखता है: -

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

मैंने खुले तौर पर एपीआई कुंजी दी थी क्योंकि मेरे पास मुफ्त सदस्यता थी, बस शुरुआत में एक मुफ्त सदस्यता है। आप "Rapidapi.com" पर कुछ अच्छे मुफ्त एपी और कुंजियाँ पा सकते हैं

Answer 8

आप जावास्क्रिप्ट में () का उपयोग करके JSON डेटा तक पहुँच सकते हैं

अपने url के साथ fetch () का url पैरामीटर अपडेट करें।

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

आशा है कि यह मदद करता है, यह मेरे लिए पूरी तरह से काम करता है।

Comments

यह DBrown के उत्तर की नकल प्रतीत होता है । कृपया डुप्लिकेट उत्तर न जोड़ें। यदि इस उत्तर के बारे में कुछ अनूठा है, तो DBrown के उत्तर का उल्लेख करें, और बताएं कि आपके बारे में क्या अलग है।

— टूलमेकरसैट

Answer 9

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


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

Comments

यह कोड केवल उत्तर है! पोस्ट में कुछ स्पष्टीकरण जोड़ें

— राम गद्याराम

यह देखते हुए कि कई मौजूदा उत्तर हैं, कृपया उल्लेख करें कि इस उत्तर के बारे में क्या चर्चा के लायक है। fetchकई मौजूदा उत्तरों में उपयोग का उल्लेख किया गया है।

— टूलमेकरसैट

Answer 10

async function fetchDataAsync() {
    const response = await fetch('paste URL');
    console.log(await response.json())

}


fetchDataAsync();

Comments

कृपया अपने उत्तर के बारे में कुछ बताएं।

— एंजेल एफ साइरस

यह देखते हुए कि कई मौजूदा उत्तर हैं, कृपया उल्लेख करें कि इस उत्तर के बारे में क्या चर्चा के लायक है। fetchकई मौजूदा उत्तरों में उपयोग का उल्लेख किया गया है। कामिल के उत्तरawait/async में भ्रूण के उपयोग का वर्णन किया गया था ।

— टूलमेकरसैट