A guide to retrieving JSON data with Javascript

Question

A guide to retrieving JSON data with Javascript

I'm in the process of building a small website for weather forecasting. However, I've encountered an issue when trying to retrieve JSON data from accuWeather - I'm not getting any response. I've double-checked my request and it seems to be fine. Can anyone help me identify what's wrong with my code so I can fix it? Also, if you could provide assistance using Javascript instead of JQuery, that would be great. Link:

This project is part of my Javascript learning journey. The apiKey is public.

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

Any assistance would be greatly appreciated.

javascript json xmlhttprequest

Answer 1

Answer №1

Visit this link for more information on XMLHttpRequest response

Learn about async functions in JavaScript here

Explore the Fetch API in detail

Check out how to chain promises with then and catch

Remember to utilize JSON.parse on your data when needed

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

Answer 2

Visit this link for more information on XMLHttpRequest response

Learn about async functions in JavaScript here

Explore the Fetch API in detail

Check out how to chain promises with then and catch

Remember to utilize JSON.parse on your data when needed

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

Answer 3

Answer №2

A couple of things to note: Firstly, it is important to actually send the request using the send() method. Secondly, if you are executing an asynchronous request, make sure 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 prefer not to make the request asynchronous, you can pass false as the second parameter to your open() call. However, this approach is discouraged as it may result in blocking calls.

For more options and details on XMLHttpRequests, consider reading further on this resource from Mozilla

Check out this working example for reference

Answer 4

A couple of things to note: Firstly, it is important to actually send the request using the send() method. Secondly, if you are executing an asynchronous request, make sure 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 prefer not to make the request asynchronous, you can pass false as the second parameter to your open() call. However, this approach is discouraged as it may result in blocking calls.

For more options and details on XMLHttpRequests, consider reading further on this resource from Mozilla

Check out this working example for reference

Answer 5

Answer №3

Here is a suggestion for you to try:

<html>
<head>
        <meta charset="utf-8"/>
        <title>fetching data</title>
        <script>
            function fetchData(){
                //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",fetchData,false);
        </script>
</head>
<body>

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

Alternatively, you could also consider this approach:

<html>
<head>
        <meta charset="utf-8"/>
        <title>fetching data</title>
        <script>
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                // Perform actions 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",fetchData,false);
        </script>
</head>
<body>

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

Answer 6

Here is a suggestion for you to try:

<html>
<head>
        <meta charset="utf-8"/>
        <title>fetching data</title>
        <script>
            function fetchData(){
                //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",fetchData,false);
        </script>
</head>
<body>

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

Alternatively, you could also consider this approach:

<html>
<head>
        <meta charset="utf-8"/>
        <title>fetching data</title>
        <script>
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                // Perform actions 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",fetchData,false);
        </script>
</head>
<body>

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

A guide to retrieving JSON data with Javascript

Answer №1

Answer №2

Answer №3

Similar questions

Tips for successfully sending an array via an XMLHttp Get request

How can I locally store 3D models and textures using three.js?

Removing items in vue.js

What is the best way to export image paths using require() from a single index.js file in a React Native project?

Have I potentially compromised my project by executing the command `npm audit fix --force`?

Can image data be extracted from a canvas without needing to physically render the canvas?

Nuxt has the ability to display the object itself, however, it cannot render its

Matching queries precisely in MongoDB

Planes in Three.js that are overflowing may have their opacity adjusted

The code encountered an error because it was unable to access the property 'style' of an undefined element on line 13 of the script

Implementing React and Material UI: Maximizing Vertical Space Usage for a Box Component

Functionality of Ajax: Data fields containing numerous values

Issue encountered when utilizing ngResource in factory: unable to choose JSON index

What is the best way to link JSON array information to the HTML using MVC?

Combining and visualizing multiple datetime series in Highcharts

If the first <select> option is chosen, then a second <select> validation is necessary

The call stack size has reached its maximum limit due to running 2 Collection.find commands

Encountering difficulties setting cookies within the app router in Next.js

Guidelines for sending an array from a Laravel Controller through AJAX and generating a button based on the received data

Adding CSS styling to a particular component within your Vue application using Vuetify JS