Javascript Fetch JSON Data (Simple Examples)

Welcome to a tutorial on how to fetch JSON data in Javascript. So you are working on a project that needs to get some data from the server? But just how do we deal with this “JSON data”?

That covers the quick basics, but read on for detailed examples!

 

 

TLDR – QUICK SLIDES

[web_stories_embed url=”https://code-boxx.com/web-stories/javascript-fetch-json-data/” title=”Javascript Fetch JSON Data” poster=”https://code-boxx.com/wp-content/uploads/2021/11/STORY-JS-20230518.webp” width=”360″ height=”600″ align=”center”]

Fullscreen Mode – Click Here

 

TABLE OF CONTENTS

 

 

 

1) FETCH JSON ARRAY

1A) DUMMY JSON DATA

["Red","Green","Blue"]

• For those who have lazily skipped the basics – “JSON data” is just a string.
• Remember how we define an array in Javascript? var colors = ["Red", "Green", "Blue"];
• Looks familiar? JSON – Javascript Object Notion. Get it?

 

1B) FETCH JSON ARRAY

// (A) FETCH DATA FROM SERVER
fetch("1a-array.json")
 
// (B) RETURN DATA AS JSON
.then(res => res.json())
.then(data => {
  console.log(data);
  for (let value of data) { console.log(value); }
})
 
// (C) OPTIONAL
.catch(err => console.error(err))
.finally(() => console.log("Done!"));

This is the same introduction snippet, a couple more details here:

• fetch(URL) Self-explanatory, fetch data from this URL.
• then(res => res.json()) Return the server response as JSON. That is, parse the JSON data back into an array or object.
• then(data => { DO SOMETHING }) Do something with the results.
• .catch(err => console.error(err)) Optional, handle any errors.
• .finally(() => console.log("Done!")); Optional, run this at the end. Regardless of success or errors.

Yep, fetch() pretty much works like a try-catch-finally block.

P.S. If you do not know what those () => {} and PARAM => {} are, it’s called an “arrow function”. A quick explanation is in the extras section below.

 

 

2) FETCH JSON OBJECT

2A) DUMMY JSON DATA

{"name":"Jon","email":"jon@doe.com"}

For those who still cannot see this as “Javascript” – var person = { name : "Jon", email : "jon@doe.com" };

 

2B) FETCH JSON OBJECT

// (A) FETCH DATA FROM SERVER
fetch("2a-object.json")
 
// (B) RETURN DATA AS JSON
.then(res => res.json())
.then(data => {
  console.log(data);
  for (let [key, value] of Object.entries(data)) {
    console.log(key, value);
  }
})

// (C) OPTIONAL
.catch(err => console.error(err))
.finally(() => console.log("Done!"));

Not much difference here. The same old parse as JSON data, and work with the results.

 

 

 

SORRY FOR THE ADS...

But someone has to pay the bills, and sponsors are paying for it. I insist on not turning Code Boxx into a "paid scripts" business, and I don't "block people with Adblock". Every little bit of support helps.

Buy Me A Coffee Code Boxx eBooks

 

EXAMPLE CODE DOWNLOAD

Click here for the source code on GitHub gist, just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

EXTRA) ARROW FUNCTIONS

• You already know this – function twice (n) { return n * 2; }
• We can also do this – var twice = function (n) { return n * 2; };
• Arrow function shorthand – var twice = (n) => { return n * 2; };
• If there is only one parameter, we can omit the round brackets – var twice = n => { return n * 2; };
• If the function only has one statement, we can omit the curly brackets and even return – var twice = n => n * 2;

 

 

LINKS & REFERENCES

• Javascript Fetch With Query – Code Boxx
• Javascript Fetch With POST Data – Code Boxx
• How To Debug Fetch – Code Boxx

 

INFOGRAPHIC CHEAT SHEET