[javascript] JavaScript의 URL에서 JSON을 얻는 방법은 무엇입니까?

이 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 응답에서 JavaScript 객체를 얻으려면 어떻게해야합니까?

답변

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 솔루션에 대한 다음 답변을 참조하십시오 : https : //.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 또는 이전 브라우저를 지원해야하는 경우 페치 polyfill을 사용할 수도 있습니다 .

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

Node.js에이 메소드가 내장되어 있지 않더라도 정확히 동일한 구현을 허용 하는 node-fetch 를 사용할 수 있습니다 .

답변

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

스 니펫 확장

답변

Axios 는 브라우저 및 node.js에 대한 약속 기반 HTTP 클라이언트입니다 .

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합니다.

답변

다음과 같은 함수를 정의하십시오.

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

});

답변

오늘 아침에도 같은 의심이 들었고 이제는 ‘open-weather-map'( https://openweathermap.org/ ) api와 함께 JSON을 사용 하고 index.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>

스 니펫 확장

무료 구독이 있었기 때문에 API 키를 공개적으로 제공했으며 처음에는 무료 구독이 있습니다. “rapidapi.com”에서 좋은 무료 API와 키를 찾을 수 있습니다