How to fetch JSON using Javascript

Question

I am trying to create a small website for weather forecasting. When sending a request to accuWeather to get JSON, I cannot get a response. I have checked the request a few times, and it works normally. Could someone point out what wrong in my code so I can fix it? In addition, If you answer, Can you use Javascript instead of using JQuery Link:

http://dataservice.accuweather.com/locations/v1/cities/search?apikey=BfZGgoA9OaaSy7oyAReezmDFngUe2Lek&q=Annandale&language=en-us&details=true

This is my project for studying javascript. apiKey is public also.

<html>
<head>
        <meta charset="utf-8"/>
        <title>getting</title>
    <script>

        function start(){
            //console.log("asdasd");
            var requestURL = "http://dataservice.accuweather.com/locations/v1/cities/search?apikey=BfZGgoA9OaaSy7oyAReezmDFngUe2Lek&q=Annandale&language=en-us&details=true" ;
            var request = new XMLHttpRequest();
            console.log(request);
            request.open('GET', requestURL);
            //console.log(request.response);
        }
        window.addEventListener("load",start,false);
    </script>
</head>
<body>

    <div id="loading"></div>
</body>
</html>

I will appreciate any help.

Joe Warner · Accepted Answer · 2018-05-28 22:47:37Z

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/response

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

Chaining promises with then and catch

You may need to use JSON.parse on your data

var requestURL = "http://dataservice.accuweather.com/locations/v1/cities/search?apikey=BfZGgoA9OaaSy7oyAReezmDFngUe2Lek&q=Annandale&language=en-us&details=true";


//ES5
function XMLrequest() {
  var request = new XMLHttpRequest();
  request.open('GET', requestURL, true);
  request.onreadystatechange = function() {
    if (request.readyState === 4) {
      console.log('XML', request.response);
    }
  }
  request.send();     
}

//ES6
function getWithFetch() {
  fetch(requestURL)
    .then(res => {
      console.log('fetch', res)
    })
    .catch(err => {
      console.log(err, 'fetch fail')
    })
}

// ES7
async function getWithAsycAwait() {
  try {
    const data = await fetch(requestURL);
    console.log('await', data)
  } catch(e) {
    console.log(e, 'await fail')
  }
}

getWithAsycAwait()
getWithFetch()
XMLrequest()

Pabs123 · Accepted Answer · 2018-05-28 18:37:06Z

Couple of things. first off, you need to actually send the request using send(). secondly, if you're doing an asynchronous request, you need to add a listener to handle the response:

request.onreadystatechange = function() {
    if (request.readyState == 4 && request.status == 200)
      console.log(request.response);
  };

  request.send(null);

If you'd prefer to not make it asynchronous you can always pass false as the second parameter to your open() call, but this is highly discouraged as it would be a blocking call.

Feel free to read a little more into XMLHttpRequests here for more options

Here is a working example

Aniruddh Agarwal · Accepted Answer · 2018-05-28 18:36:58Z

You should try doing something like this:

<html>
<head>
        <meta charset="utf-8"/>
        <title>getting</title>
        <script>
            function start(){
                //console.log("asdasd");
                var requestURL = "http://dataservice.accuweather.com/locations/v1/cities/search?apikey=BfZGgoA9OaaSy7oyAReezmDFngUe2Lek&q=Annandale&language=en-us&details=true" ;
                var request = new XMLHttpRequest();
                console.log(request);
                request.open('GET', requestURL);
                request.send();
                //console.log(request.response);
            }
            window.addEventListener("load",start,false);
        </script>
</head>
<body>

    <div id="loading"></div>
</body>
</html>

or something like this:

<html>
<head>
        <meta charset="utf-8"/>
        <title>getting</title>
        <script>
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                // Action to be performed when the document is read;
                }
            };
            xhttp.open("GET", "http://dataservice.accuweather.com/locations/v1/cities/search?apikey=BfZGgoA9OaaSy7oyAReezmDFngUe2Lek&q=Annandale&language=en-us&details=true", true);
            xhttp.send();
            window.addEventListener("load",start,false);
        </script>
</head>
<body>

    <div id="loading"></div>
</body>
</html>

Thanks @Aniruddh Agarwal. Your way is correct. I understand what you want to say.

Collectives™ on Stack Overflow

How to fetch JSON using Javascript

3 Answers 3

1 Comment

Comments

2 Comments

Linked

Hot Network Questions