JSON

JSON, or JavaScript Object Notation, is a way to store data for your website.

Data formats

There are a few data formats that are standardized for computer to read.

JSON

  • JavaScript Object Notation.
  • Widely used for storing, serializing, and transmitting structured data.
  • A string of data
  • More read 👉 Mozilla: Working with JSON

CSV

  • Comma-separated Values.
  • Represents tabular data: a form of table in which values for each column of the table are separated by commas.
  • Simple and light-weight, used to handle a huge amounts of data.
  • Easy to use in a Spreadsheet Program.
  • More read 👉What Is a CSV File? Guide to Uses and Benefits

XML

  • eXtensible Markup Language
  • markup language without no predefined tags.
  • simple text-based format for representing structured information: documents, data, configuration, books, transactions, invoices, and much more
  • More read 👉Mozilla: XML introduction

Other filetype

  • text file, PDF, etc

JSON

Syntax

Basic JSON file is a string like the following, with the quotations around the brackets.

/* .js */
var color = {
    "name" : "mycolor", 
    "r": 255,
    "g": 0,
    "b": 0
};

JSON can be easily bulky and complex to load a length of data. In this case, JSON can be loaded into your project as a stand alone file. There are no variables in this file — it is just an object that starts with the curly brackets.

/* .json */
 {
    "name" : "mycolor",
    "r": 255,
    "g": 0,
    "b": 0
}

All property names have to be surrounded by double quotes, and only simple data expressions are allowed. No function calls, bindings, or anything that involves actual computation. Comments are not allowed in JSON either.

JSON can have more than one object, and also lets you create nested arrays.

/* .js */
var shapes = {
  "myshape": [
      { "shape": "circle", // this is data object [0]
        "r": 0,
        "g": 255,
        "b": 0 
      },
      { "shape": "square", // this is data object [1]
        "r": 255,
        "g": 0,
        "b": 0 
      }
   ]
};

Data path

To use JSON data for your project, we need to figure out a path to get into this JSON objects. In order to access any of the values, we will use dot notation that looks like below. The variable name is first, followed by a dot, followed by the key to be accessed.

  color.name //mycolor
  color.r //255
  color.g //0
  color.b //0

Accessing Array items

If the property name is an array, use the number of index we are looking for. The order of an item in an array is called an index. Think of it as a numerical label. The position number starts at 0 (not 1.). In JS, we can call that item in the array within the context of dot notation like below:

  shapes.myshape[0].r //0
  shapes.myshape[1].shape //square

How to use JSON data in JS

Internal

If your JSON file is short enough, you can directly implement it into your JS file like the two examples below:

// JSON object
let myshape = {
    "name": "myshape", 
    "code": {
      "r": 255,
      "g": 0,
      "b": 0 
    },
    "shapes" : ["circle", "square", "oval"] 
};
// accessing JSON object
console.log(myshape.name); // red
console.log(myshape.code); // { r: 255, g: 0, b: 0}
console.log(myshape.code['r']); // red
console.log(myshape.shapes[1]); // square

External

You can get JSON data using an AJAX request, and output the result.
To load JSON data using jQuery, use the getJSON() or ajax() method. The jQuery.getJSON( ) method loads JSON data from the server using a GET HTTP request.

⚠️You will need to set up your local server to load JSON in your web project locally. In this demo, I used python in terminal; more details 👉🏼 Mozilla: How do you set up a local testing server?; you can also consider using an app such as MAMP instead.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>JSON Demo</title>
        <style type="text/css">            
            .myshape{
                width: 200px;
                height: 200px;
                background: black;
                padding: 50px;
                text-align: center;
            }
            .circle{
                border-radius: 50%;
            }
            .oval{
                height: 100px;
            }
        </style>
    </head>
    <body>
      <button id="trigger">Click</button>
      <div id="container"> </div>
      <script>
        // JSON object
        let myshape = {
            "name": "myshape", 
            "code": {
              "r": 255,
              "g": 0,
              "b": 0 
            },
            "shapes" : ["circle", "square", "oval"] 
        };

        let button = document.getElementById('trigger');

        button.addEventListener('click', function(){
            let div = document.createElement("div");
            div.classList.add("myshape");
            div.classList.add(myshape.shapes[0]);
            div.innerText = myshape.name;
            div.style.backgroundColor = `rgb(${myshape.code.r}, ${myshape.code.g}, ${myshape.code.b})`;
            container.appendChild(div); 
        });
     </script>
    </body>
</html>

Data + Type visualization examples

Other resources

<>