Tania Rascia

Skip Navigation
How to Use the JavaScript Fetch API to Get JSON Data

How to Use the JavaScript Fetch API to Get JSON Data

 /  8 responses

In How to Use JSON Data with PHP or JavaScript, I discussed how to use XMLHttpRequest() to get data from a JSON feed.

The Fetch API is a newer built-in feature of JavaScript that makes working with requests and responses easier.

// Replace ./data.json with your JSON feed
fetch('./data.json').then(response => {
  return response.json();
}).then(data => {
  // Work with JSON data here
  console.log(data);
}).catch(err => {
  // Do something for an error here
});

Note that with Fetch, even a 404 or 500 error will not return an error. Only a network error or a request not completing will throw an error.

Note

Hi, my name is Tania Rascia. I've turned down every offer for advertisements or sponsored posts on this website. I write free resources that have helped thousands of people successfully transition into a web development career.

My committment is to no bullshit, no sponsored posts, no ads, and no paywalls. If you enjoy my content, please consider supporting what I do.

Support my work

Newsletter

New articles on web development every two weeks.

Write a response

Your email address will not be published.

All code will be displayed literally.

Discussion

  • Om prakaash says:

    Hi, do you know how to get clash of clans API data from developers.clashofclans.com to google sheets? I searched for 3 days, tried tutorials and still don't know how to do that..

  • PRATIKSHIT SINGH says:

    nice worked for mehh

  • Siddique says:

    Just helpful

  • Andy says:

    Great resource!

    I've been burned by assuming `catch` will catch 404 and 500 errors. For other new learners like me, it might be worth updating your example to show people how to properly catch these, maybe something like:

    “`
    // Replace ./data.json with your JSON feed
    fetch('./data.json').then(response => {
    if (!response.ok) {
    throw Error(response.statusText);
    }
    return response.json();
    }).then(data => {
    // Work with JSON data here
    console.log(data);
    }).catch(err => {
    // Do something for an error here
    });
    “`

  • Samuel Guebo says:

    Concise and self-explanatory. Thank you Tania for sharing. I am leaving this small contribution for whoever that comes along and wants an example with data from an API, a random generator API in this case.

    // Set default api url
    var apiUrl = ‘https://randomuser.me/api/?results=10’

    fetch(apiUrl).then(response => {
    return response.json();
    }).then(data => {
    // Work with JSON data
    var persons = data.results
    // Display each person details
    persons.forEach(function(person) {
    console.log(
    “My name is %s and I am %s \n”,
    person.name.first + ” ” + person.name.last,
    person.gender);
    })
    }).catch(err => {
    // Print error, if any
    console.log(err)
    });

    • Peter says:

      If I have in my php file a echo "hi"; (example) and I want to log this echo in my console in front end how can I see this log if I have .json() format?