জাভাস্ক্রিপ্টে ইউআরএল থেকে জেএসএন কীভাবে পাবেন?

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

আপনার কাছে যা আছে তা হ'ল একটি ইউআরএল যা জেএসএন স্ট্রিংযুক্ত প্রতিক্রিয়া দেখায়। আপনি কি ইউআরএল থেকে কিছু অনুরোধ করবেন তা জিজ্ঞাসা করছেন? কারণ এটি আপনি যে ভাষা বা সরঞ্জাম ব্যবহার করছেন তা অনেকটা নির্ভর করবে। আরো নির্দিষ্ট করা.

— jrajav

এই প্রশ্নটি বিভ্রান্তিকর। আপনি উল্লিখিত 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

গৌণ বিন্দু তবে এটি আরও পরিষ্কার হতে পারে যদি এটি বলেছিল যে 'জেএসওএন 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) {আমি নিশ্চিত, এটি খাটো তবে আপনি কয়েকটি অক্ষর সাশ্রয় করার জন্য প্রচুর সহায়তার ত্যাগ করছেন। এটি কোড-গল্ফ নয়

— ডাউনগোট

এটি কেবল খাটো নয়, তবে এই পোস্ট অনুসারে এটি আরও বেশি নির্ভরযোগ্য বলে মনে হয় । এবং ক্যানিউজ ডট কম বলেছেন যে এটি আইই 8 ব্যতীত অন্য সবকিছুর দ্বারা সমর্থিত, সুতরাং যতক্ষণ আপনার আইই 8 সমর্থন করার প্রয়োজন হয় না, ততক্ষণ আপনি কেন লোড ব্যবহার করবেন না তা আমি দেখতে পাচ্ছি না।

— রবিন হার্টম্যান

@ মাইকিস্কুলিভান আমি একটি জিনিস জানতে চেয়েছিলাম, আমি কেন প্রতিক্রিয়া পাঠ্য এবং প্রতিক্রিয়া এক্সএমএলকে অপরিজ্ঞাত হিসাবে সাড়া দিচ্ছি যদিও প্রতিক্রিয়া অবস্থা = 200?

— হুশি

@ হৃশি যদি এগুলি সংজ্ঞায়িত হয় তবে আপনি সেগুলি ভুল উপায়ে বা ভুল প্রসঙ্গে ব্যবহার করতে পারেন। মনে রাখবেন, আপনাকে xhr.responseText এবং xhr.responseXML ব্যবহার করতে হবে এবং এগুলি কেবল getJSON ফাংশন সংজ্ঞা ব্লকের মধ্যে উপলব্ধ, এর বাইরে নয়।

— রবিন হার্টম্যান

@ মিচেলডি আপনি কি নোড.জেএস ব্যবহার করছেন? তারপরে এখানে একবার দেখুন । তবে পরের বারে প্রথমে ত্রুটিটি গুগল করার চেষ্টা করুন, আমি পোস্ট করা লিঙ্কটি প্রথম ফলাফল যা আমি গুগলে ত্রুটি টাইপ করি তখন আসে।

— রবিন হার্টম্যান

Answer 3

ক্রোম, ফায়ারফক্স, সাফারি, এজ এবং ওয়েবভিউয়ের সাহায্যে আপনি আনতে পারেন এমন আনুষঙ্গিক এপিআই যা এটিকে অনেক সহজ করে তোলে এবং আরও অনেক ক্ষুদ্র করে তোলে।

আইই বা পুরানো ব্রাউজারগুলির জন্য আপনার যদি সমর্থন প্রয়োজন হয় তবে আপনি আনতে পলিফিলও ব্যবহার করতে পারেন ।

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

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

MDN: এফআইপি আনুন

নোড.জেএস-এ বিল্ট-ইন পদ্ধতি না থাকা সত্ত্বেও, আপনি নোড-ফেচ ব্যবহার করতে পারেন যা সঠিক একই প্রয়োগের জন্য অনুমতি দেয়।

Comments

উঘ .. এটি আইই 11 তেও সংকলন করে না। আইই এমন জাঙ্ক কেন?

— ড্যানো

আপনি এই সমস্যাটি কাটিয়ে উঠতে সর্বদা গিথুব / আনার পলিফিল ব্যবহার করতে পারেন।

— DBrown

@ এডান এটি তীর ফাংশন। স্থানান্তর করতে নিয়মিত ফাংশন বা ব্যাবেল ব্যবহার করুন

— ফিল

ES6 দেখানোর জন্য @ ফিলিল ধন্যবাদ। আইই ১১-এর সবচেয়ে বড় সমস্যাটি হ'ল আনয়ন কোনও সমর্থিত এপিআই নয়: বিকাশকারী.মোজিলা.আর.ইন- ইউএস / ডকস / ওয়েবে / এপিআই / ফ্যাচ_এপিআই এটিও জানা উচিত যে আইই ১১-এর জন্য আনতে যাওয়া পলিফিলটি নিছক ES5 (অভাবের কারণে) সমর্থন), সুতরাং অন্যথায় আপনার একেবারে প্রয়োজন না হলে ES6 প্রতিস্থাপনের প্রকৃত প্রয়োজন নেই। এটি যুক্ত করার একমাত্র কারণ যদি আনয়ন আইডিয়োমকে সমর্থন করা (যদি পলিফিল এমনকি এটি সমর্থন করে), বাবেল-পলিফিল ব্যবহার করা আরও ভাল বিকল্প। ভাগ্য সুপ্রসন্ন হোক!

— DBrown

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

আপনি চেষ্টা করে ত্রুটিগুলি পরিচালনা করতে পারেন

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

অ্যাকজিওস ব্রাউজার এবং নোড.জেএস এর জন্য একটি প্রতিশ্রুতি ভিত্তিক এইচটিটিপি ক্লায়েন্ট ।

এটি JSON ডেটার জন্য স্বয়ংক্রিয় রূপান্তরগুলি সরবরাহ করে এবং ডিফল্টরূপে একটি REST ক্লায়েন্ট অন্তর্ভুক্ত 1.0 সংস্করণ থেকে স্থানান্তরিত করার সময় এটি Vue.js টিমের অফিশিয়াল সুপারিশ ।

একটি 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

প্রচুর বিদ্যমান উত্তর রয়েছে তা প্রদত্ত, দয়া করে উল্লেখ করুন যে এই উত্তরটি কী তা আলোচনায় যুক্ত করার উপযুক্ত করে তোলে। আনতে ব্যবহারের ব্যবহার বেশ কয়েকটি বিদ্যমান উত্তরে উল্লেখ করা হয়েছে।

— টুলমেকারস্টেভ

এটি ২০২০ সালের একমাত্র প্রাসঙ্গিক উত্তর It এটি কেবল একটি আনয়ন যা একটি অ্যাসিঙ্ক্রোনাস ইভেন্টটি সম্পন্ন হওয়ার জন্য কলব্যাকের প্রয়োজন। সহজ এবং মার্জিত

— লেসোলরোজানোভ

fetchএই ক্ষেত্রে কেন অপেক্ষা করা হচ্ছে না ? আমি বিভ্রান্ত হয়ে পড়েছি, যেখানে

— উদাহরণস্বরূপ

Answer 7

এই সকালে, আমারও একই সন্দেহ ছিল এবং এখন এটি সাফ হয়ে গেছে আমি সবেমাত্র 'ওপেন-ওয়েদার-ম্যাপ-ম্যাপ' ( https://openweathermap.org/ ) এপিআই দিয়ে জেএসএন ব্যবহার করেছি এবং সূচি html ফাইলে 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>

আমি এপিআই কীটি খোলামেলাভাবে দিয়েছিলাম কারণ আমার বিনামূল্যে চাঁদা ছিল, শুরুতে একটি বিনামূল্যে সাবস্ক্রিপশন রয়েছে। আপনি "দ্রুতডাপি ডটকম" এ কিছু ভাল ফ্রি এপি এবং কীগুলি পেতে পারেন

Answer 8

আপনি জাভাস্ক্রিপ্টে ফেচ () ব্যবহার করে JSON ডেটা অ্যাক্সেস করতে পারেন

আপনার ইউআরএল দ্বারা আনা () এর url প্যারামিটার আপডেট করুন।

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

আশা করি এটি সহায়তা করে, এটি আমার পক্ষে নিখুঁতভাবে কাজ করেছিল।

Comments

এটি ডি ব্রাউন এর উত্তরের সদৃশ বলে মনে হচ্ছে । সদৃশ উত্তর যুক্ত করবেন না দয়া করে। যদি এই উত্তর সম্পর্কে কিছু অনন্য থাকে, তবে ডি ব্রাউন এর উত্তর উল্লেখ করুন এবং আপনার সম্পর্কে কী আলাদা তা ব্যাখ্যা করুন।

— টুলমেকারস্টেভ

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 বর্ণিত হয়েছিল আনার সাথে ব্যবহারের বিষয়টি ।

— টুলমেকারস্টেভ