Working with JSON Data and Common Use Case Examples

Note: This is part 2 of three-part How to Make HTTP Request in JavaScript series. This learning post is still in active development and updated regularly.

In this three-part How to Make HTTP Request in JavaScript series, introduction to JSON, working with JSON data, and connecting to external API to obtain JSON data from servers, and their use in web pages will be discussed.

Posts Series:
Part 1: Deep Diving into JSON and Its Use in JavaScript
Part 2: Working with JSON Data and Common Use Case Examples (this post)
Part 3: How to Connect to an External API with JavaScript

The first part of the three-part series Deep Diving into JSON and Its Use in JavaScript is discussed previously. The objective of this part 2 of three-part series is to discuss more complex JSON data types and common use cases of JSON data types.

JSON Data Use Cases

JASON data can be used in many ways and some use common uses include the following:

1: Store as JSON File

JSON data can be save in a file in .json format. In the example below the data is an array of object (note: square brackets) stored as mydata.json file which contains author information.

[
{"name":"Robin", "title":"Author", "email":"robin@abc.com"},
{"name":"Kirupa", "title":"Author", "email":"kirupa@xyz.com"}
]

2: Generating Data Structures From User Input

Another use case of JSON data is to collect and store user input data from a registration form required in order to become a registered user. The data is temporarily stored in memory then it can be saved in a .json file and used to perform various tasks.

{"username":"Robin", "email":"robin@abc.com", "password":"abc123"}

3: Transferring Data Between Systems

Data are constantly transferred in the internet from one language to another, from server to clients and vice versa, between servers to servers , to name a few cases. JSON is most commonly used data transfer format to send and receive data from API. How to use JSON in external API will be discussed in the next in this series.

4: Configuring and Verifying Data

JSON data format are often used to store user credentials to connect to user database and server file path. Using the example (below) from here:

"database": {
    "host": "localhost",
    "port": 3306,
    "user": "root",
    "password": "abc123"
  },
  "files": {
    "log": "/log/app.log",
    "errorLog": "/log/error.log"
  }
}

Additional Information: JSON use cases | Codexpedia

5: Some Useful Tools

JSON API – A specification for building APIs in JSON
JSON Formatter – Tool to help format JSON data. It also provides tree view which helps to navigate formatted JSON data.
JSON Validator – Easy to use JSON Validate tool to validate JSON data.

Working With JSON Format

In previous post Deep Diving into JSON and Its Use in JavaScript, basic working with JSON format including accessing JSON data, modifying & deleting value and JSON methods ( JSON.stringify() and JSON.parse() ) were discussed.

In this post use cases of more complex JSON data in HTML webpages as inline JSON string object and reading from external JSON data file will be discussed.

1. Looping Through an JSON Object

In the following simple use case example, simple JSON object data with information on books received as string from a server is assigned to a books variable. Such strings are useful for data transport (server to client and/or vise versa) but such strings need to be converted back to JSON object using <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse" target="_blank" rel="noopener noreferrer">JSON.parse()</a> function before it can be processed as JS object.

//JSON data
let books = `[
   { 
    "title" : "Road to React",
    "author" : "Robin Wieruch"
   },
   { 
    "title" : "The Road to React with Firebase",
    "author" : "Robin Wieruch" 
    },
    { 
     "title" : "Learning React",
     "author" : "Kirupa Chinnathambi"
     }
   ]`
//parse JSON string	  
books = JSON.parse(books);
//loop through data
for (let i = 0; i < books.length; i++) {
	console.log(books[i].title + ', Author: ' + books[i].author + '.');
}
//OUTPUT
Road to React, Author: Robin Wieruch.
The Road to React with Firebase, Author: Robin Wieruch.
Learning React, Author: Kirupa Chinnathambi.

In the example above, to convert the string data back to JSON object, the books variable is pass through JSON.parse() function and re-assigned to books variable (line 17). The re-assigned books variable (line 17) now stores the converted data as JSON object.

The books variable can be used as regular JS object to iterate items in books object using <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for" target="_blank" rel="noopener noreferrer">for</a> loop (lines: 19-21) to print book title and its author (lines: 23-25).

In the next section, a more complex use case example of using nested JSON array data in a HTML page is discussed.

2. Looping Through an Nested Array

In a more complex example below, mydata variable stores a JSON nested array which contains authors information with information on each author’s books (title, release year and ASIN number). As discussed in previous example, the JSON data are used in a HTML page, formatted with HTML tags, to display list of book titles by each author.

<!DOCTYPE html>
<html>
<body>
<p id="root"></p>
<script>
  //JSON data
  let mydata = 
    {
      "authors" : [
        {
          "authorname" : "Kirupa Chinnathambi",
          "URL" : "https://www.kirupa.com/",
          "books" : [
            {
              "booktitle" : "Learning React",
              "year" : "2018",
              "ASIN" : "B07CQPL2BM"
            }, 
            {
              "booktitle" : "Creating Web Animations",
              "year" : "2017",
              "ASIN" : " B06XRMMG64"
            }
          ]
        },
        {
          "authorname" : "Robin Wieruch",
          "URL" : "https://www.robinwieruch.de/",
          "books" : [
            {
              "booktitle" : "The Road to Learn React",
              "year" : "2017",
              "ASIN" : "B077HJFCQX"
            }, 
            {
              "booktitle" : "The Road to React with Firebase",
              "year" : "2019",
              "ASIN" : "B07N2LFXDP"
            },
            {
              "booktitle" : "The Road to GraphQL",
              "year" : "2018",
              "ASIN" : "B07K5TF5LP"
            }
          ]
        },
        {
          "authorname" : "Eve Percello",
          "URL" : "https://github.com/eveporcello",
          "books" : [
            {
              "booktitle" : "Learning React",
              "year" : "2017",
              "ASIN" : "B071HB1526"
            }, 
            {
              "booktitle" : "Learning GraphQL",
              "year" : "2018",
              "ASIN" : "B07GBJZX1L"
            }
          ]
        }
      ]
  }
  
  // store data into a variable & HTML format
    let authorList = "<h1>List of Authors</h1>";
    
    // Loop through the authors
    for (let i in mydata.authors) {
        authorList += "<h2>" + mydata.authors[i].authorname + "</h2>"; 
        authorList += "<ul>";
        
        // Loop through the books for the current author
        for (let j in mydata.authors[i].books) {
          authorList += "<li>" + mydata.authors[i].books[j].booktitle;
      }
      authorList += "</ul>";
    } 
   //display output
   document.getElementById("root").innerHTML = authorList;
</script>
</body>
</html>

In the example above, for..in loop is used to display list of authors and list of books by each author as described by Ray Villalobos.

Step 1: First the data are stored in a authorList variable (line 67) .

Step 2: Using for..in loop, each authors is loop through to access each authors (lines: 70-72).

Step 3: Using for..in loop again book by current author are loop through (lines: 75-77).

Step 4: Returned value is stored in authorList (line 78) and updated each iteration until all array items are completed.

Step 5: Finally, authorList is displayed (line 81) using <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById" target="_blank" rel="noopener noreferrer">document.getElementById(id)</a> with innerHTML with the output shown below.

Figure: Screenshot of authorList display in Firefox browser.

Reading From External JSON File

Reading JSON data file from an URL or locally is a bit tricky because it involves use of an API based on top of HTTP known as XMLHttpRequest (XHR) API or Fetch API for fetching data from servers to client agents.

Understanding HTTP protocol, XMLHttpRequest, API, REST, CORS (Cross-Origin Resource Sharing) requires prior knowledge of lot of terminology, acronyms and their concepts & uses. An overview and using XHR and Fetch API is discussed in separate post How to Connect to an External API with JavaScript.

Additional Information: An overview of HTTP and Using XMLHttpRequest | MDN Web Docs

Setup & File Structure

A very simple file structure is used for this project. The project directory folder contains only three files, an index.html, x.JSON (JSON data file) and a script.js. The index.html contains HTML doc with links to script.js file and a basic div with an id of “root“. All the coding is done in script.js file.

The same file structure is used for all the three methods discussed below with some modification in JSON and script files.

1: Using XMLHttpRequest

The XMLHttpRequest (XHR) API is HTTP based API to exchange data between a client agent and a server without page refresh. It is commonly used to retrieve any type of data, not just XML, and it supports protocols including file and ftp.

The following example is adopted from reading JSON from an external file used in A JSON Tutorial by Ray Villalobos with some modification.

Step 1: Create a JSON file named jsondata.json in project folder. The JSON object contains information on React books where "books" key includes bunch of books name and their corresponding URL presented as an array (lines: 4-10).

{
  "topic" : "ReactJs",
  "category" : "Tutorials",
  "books" : [
    { "Road to Learn react":"https://www.robinwieruch.de/the-road-to-learn-react/" },
    { "Learning React":"https://www.kirupa.com/book/index.htm" },
    { "Road to Learn React Firebase":"https://leanpub.com/learn-react-firebase"},
    { "Learning react by Eve Porcello":"http://shop.oreilly.com/product/0636920049579.do"},
    { "Road to React": "https://roadtoreact.com" }
  ]
}

Step 2: Create an <strong>index.html</strong> file in the project folder. This is a basic HTML doc with a <h2> selector to display book title and a <ul> tag with root id (line 9) to display unordered list of books. The myscript.js file is linked in line 11.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>JavaScript and JSON</title>
</head>
<body>
  <h2>React Books</h2>
  <ul id="root"> </ul>
<!-- link script file -->
  <script src="myscript.js"></script>

</body>
</html>

Step 3: Create a script file named <strong>myscript.js</strong> in the project folder.

//myscript.js (adopted from raybo.org)
var request;
 if (window.XMLHttpRequest) {
   request=new XMLHttpRequest();
 } else {
   request=new ActiveXObject("Microsoft.XMLHTTP");
}

request.open('GET', 'jsondata.json');
request.onload = function () {
 //JSON data parse here 
  info = JSON.parse(request.responseText);
 // JSON data access begin here
  var output='';
    for (var i = 0; i <= info.books.length-1; i++) {
      for (key in info.books[i]) {
      if (info.books[i].hasOwnProperty(key)) {
	output += '<li>' + 
	'<a href = "' + info.books[i][key] +
	'">' + key + '</a>';
	'</li>';
	}   
     }
   }
			
   var update = document.getElementById('root');
   update.innerHTML = output;		
} //onload request
request.send();

The above code snippet is adopted and modified from examples used in JavaScript and JSON: Integration Techniques by course Ray Villalobos in LinkedIn Learning. An overview of XMLHttpRequest API use in fetching JSON data is discussed in other post.

Step 4: Browser Output

Figure: Screenshot showing usef of XMLHttpRequest to read a local JSON file in a Firefox browser.

2: Using Fetch

The Fetch API is similar to XMLHttpRequest to access resources from API with simpler and more robust features. An overview of Fetch API features (concepts and uses) to connect to external API is discussed in other post How to Connect to an External API with JavaScript.

Step 1: Create <strong>books.json</strong> data in JSON Format. The JSON books objects contains an array with book name and title information.

#! bookdata.json
{ "books" : [
     { "Name" : "Kirupa Chinnathambi", "Title" : "Learning React" }, 
     { "Name" : "Kirupa Chinnathambi", "Title" : "Creating Web Animations" }, 
     { "Name" : "Robin Wieruch", "Title" : "The Road to Learn React" }, 
     { "Name" : "Robin Wieruch", "Title" : "The Road to React with Firebase" },
     { "Name" : "Robin Wieruch", "Title" : "The Road to GraphQL" },
     { "Name" : "Eve Percello",  "Title" : "Learning React" }, 
     { "Name" : "Eve Percello",  "Title" : "Learning GraphQL" }
  ]
}

Step 2: Create a basic <strong>index.html</strong> doc file with <h3> selector to display book title, and <ul> tag to display lists of name & title (lines: 10-11). The script file is linked in line 13.

<!DOCTYPE html>
<html>
  <!--Source: GitHub|MDN/Fetch-examples/fetch-jason:
   https://github.com/mdn/fetch-examples/tree/master/fetch-json -->
  <head>
    <meta charset="utf-8">
    <title>Fetch JSON Example</title>
  </head>
  <body>
    <h3>Books on React (by Authors)</h3>
    <ul></ul>
  </body>
  <script src="authorsFetchScript.js"></script>
</html>

Step 3: Create Fetch Script named authorsFetchScript.js.

The following code snippets is adopted from Fetch JSON examples of GitHub MDN/Fetch-Examples with some modification.

// authorsFetchScript.js (Modified from Github/MDN )
var authorList = document.querySelector('ul');
   fetch('bookdata.json')
   .then(function(response) {
     if (!response.ok) {
      throw new Error("HTTP error, status = " + response.status);
    }
    return response.json();
   })
   .then(function(json) {
    //JSON data access begin here
   for(var i = 0; i < json.books.length; i++) {
    var listItem = document.createElement('li');
    listItem.innerHTML = '<em>' + json.books[i].Name + '</em>';
    listItem.innerHTML +='<strong> | Title : </strong>' + json.books[i].Title + '.';
    authorList.appendChild(listItem);
    }
   })
   .catch(function(error) {
   var p = document.createElement('p');
   p.appendChild(
   document.createTextNode('Error: ' + error.message)
   );
   document.body.insertBefore(p, authorList);
 });

Step 4: Browser output: Lunch the index.html file in a browser for display out.

Figure: Screenshot of Fetch API reading a local JSON file observed in a Firefox browser.

3: Using JQuery

The jQuery.getJSON() function can be used to access JSON data from an URL or read locally from a JSON file. This method is much simpler but it requires JQuery JavaScript library loaded before custom script.

The example below (adopted from Ray Villalobos blog) :

Step 1: Create JSON data file named <strong>data.json</strong> where JSON books object contains an array with information on title of the books with their authors.

{ "books" : [
   { "title" : "Road to React", "author" : "Robin Wieruch" },
   { "title" : "The Road to React with Firebase", "author" : "Robin Wieruch" },
   { "title" : "The Road to GraphQL", "author" : "Robin Wieruch" },
   { "title" : "Learning React", "author" : "Kirupa Chinnathambi" },
   { "title" : "Learning React", "author" : "Eve Percello" },
   { "title" : "Learning GraphQL","author" : "Eve Percello" }
   ]
}

Step 2: Create a basic <strong>index.html</strong> file, as earlier, with <h3> selector to display book title, and <div> tag with an id of “root” to display lists of name & title (lines: 9-10). The JQuery javaScript libray is linked (line 12) in the document followed by script file (line 13).

<!DOCTYPE html>
<html lang="en">
<!-- Source: JSON tutorial by Ray Villalobos | http://www.raybo.org/blog/  -->
<head>
    <meta charset="utf-8" />
    <title>JSON Sample</title
</head>
<body>
    <h3>Books on React</h3>
    <div id="root"></div>
    <!-- link JQuery library & script file -->
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="jqueryScript.js"> </script>
</body>
</html>

Step 3: Create JQuery script file named <strong>jqueryscript.js</strong>, which much simpler than XHR discussed earlier. The entire code is wrapped inside getJSON() function of JQuery.

//jqueryScript.js
$.getJSON('data.json', function(data) {
     var output="<ul>";
     for (var i in data.books) {
       output+="<li>" + data.books[i].title +"<strong> | Author : </strong>" 
       + data.books[i].author + "</li>";
     }
     output+="</ul>";
     document.getElementById("root").innerHTML=output;
  });

The JSON books object received from getJSON() was assigned to a variable output. Using for..in statement, key:value of books array are iterated to produced unordered list of books. The formatted JSON Data stored in output variable are displayed using innerHTML.

Step 4: Browser Output

Figure: Screenshot of JQuery use to read a local JSON file as observed in a Firefox browser

Wrapping Up

In the part 1 on this series, introduction to JSON, syntax & data types and simple use case examples were discussed. In this part 2 of three-part series post, more complex use case examples of JSON and reading locally stored JSON file with XMLHttpRequest, Fetch API and JQuery were discussed. In the next post, connecting to external API to access JSON data will be discussed.

Part 3: How to Connect to an External API with JavaScript

Useful Resources and Links

While preparing this post, I have referred the following references extensively. Please to refer original posts for more detailed information.

Working with JSON and Using XMLHttpRequest | MDN Web Docs
How To Work with JSON in JavaScript – Lisa Tagliaferri | Digital Ocean
A JSON Tutorial. Getting started with JSON using JavaScript and jQuery | Raybo.org
JavaScript JSON | W3Schools
JSON Tutorial | REST API Tutorial