What is JSON File ?

JSON stands for JavaScript Object Notation. A JSON file has .json as its extension and the data inside are represented in a key:value pair, just like a traditional JavaScript object.

{
  "key1": "value1",
  "key2": "value2",
  "key3": "value3",
  "key4": 7,
  "key5": null,
  "favFriends": ["Kolade", "Nithya", "Dammy", "Jack"],
  "favPlayers": {"one": "Kante", "two": "Hazard", "three": "Didier"}
}

Accepted JSON Data Types

JSON can be defined in an object or an array, which might take in several objects.

So, objects and arrays are automatically acceptable data types in JSON. Other data types that it supports are boolean, null, and string.

Data types such as undefined, function, and date are not supported by JSON.

 

JSON syntax rules to know:

• All the data in the file must be surrounded by curly braces if you're representing it as an object, and in square brackets if it is an array.
• Single quotes are not allowed
• The key in each JSON must be unique and must be in double quotes
• Numbers must not be enclosed in double-quotes, otherwise they will be treated as strings.
• The null data type must not be enclosed in double-quotes.
• Boolean values can only be true or false.
• Each key:value pair must be terminated with a comma except for the last item
• A particular object inside an array must be terminated by a comma, too.

How JSON Data is Sent to the Client (Browser)

JSON was created out of the need to send data from the server (a database, for example) to the client (browsers) in real-time.

In JavaScript, JSON.parse() converts JSON data to objects and JSON.stringify() converts an object's key:value pair to JSON data.

 

<h2>Here is the Data from the JSON:</h2> 
<div id="json"></div>

 const JSONData = {
    "key1": "value1",
    "key2": "value2",
    "key3": "value3",
    "key4": 7,
    "key5": null,
    "favFriends": ["Kolade", "Nithya", "Dammy", "Jack"],
    "favPlayers": {"one": "Kante", "two": "Hazard", "three": "Didier"}
}

const JSONString = JSON.stringify(JSONData)
const JSONDisplay = document.querySelector("#json")
JSONDisplay.innerHTML = JSONString

JSONString: String type

 

const JSONData =
     '{"name": "Kolade", "favFriends": ["Kolade", "Nithya", "Rocco", "Jack"], "from": "Africa"}';

   try {
     const JSONString = JSON.parse(JSONData);
     const JSONDisplay = document.querySelector("#json");
     JSONDisplay.innerHTML = JSONString.name + ", [" + JSONString.favFriends + "], " + JSONString.from;
   } catch (error) {
     console.log("Cannot parse the JSON Data");
   }

JSONString: Object Type

Why use JSON Type ?

JSON (JavaScript Object Notation) is most widely used data format for data interchange on the web. JSON is a lightweight text based, data-interchange format and it completely language independent. It is based on a subset of the JavaScript programming language and it is easy to understand and generate. 

We use JSON because it's extremely lightweight to send back and forth in HTTP requests and responses due to the small file size. It's easy to read compared to something like XML since it's much cleaner and there's not as many opening and closing tags to worry about.

 

 

 

Source from 

- https://www.freecodecamp.org/news/what-is-a-json-file-example-javascript-code/

- https://www.geeksforgeeks.org/json-data-types/

- https://www.prokurainnovations.com/json/