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

display a container and navigate to the specific link

Adjusting the array of buttons with various functions within the Header component

Creating dynamic templates for table rows in AngularJS directives

Fill the second dropdown menu options based on the selection made in the first dropdown menu

JavaScript: abbreviated way to selectively append an element to an array

Verify key in JSON object using org.json.simple library in Java

Struggling to properly test the functionality of my NgForm call in Angular2+

In what ways can you toggle the visibility of table rows and data dynamically with the onchange event in HTML?

The functionality of cloning in jQuery may encounter an issue where the text field remains enabled if the user selects an option labeled "other

How can you set an input field to be initially read-only and then allow editing upon clicking a button using Vue.js?

When attempting to change a Component's name from a string to its Component type in Angular 9, an error is thrown stating that the passed-in type is

I'm encountering an issue with my React master component not being able to locate the

Issue with Browsersync causing task to malfunction in Gulp 4

Tips for preventing HTML ID clashes while integrating with the Document Object Model of external websites

How to transform a hyperlink into a clickable element within an absolutely positioned container

What is the process for extracting information from JSON data that is not in

JSON Scheme - Mandatory Array Declaration

The function .play() cannot be executed on document.getElementById(...) - it is not a

react-native-track-player failing to play song requested from Express server

Transform JSON dictionary into a row within a Pandas DataFrame