JSON

Details: Last Updated: Monday, 27 September 2021 07:34; Published: Sunday, 26 September 2021 16:10; Hits: 695

JSON:

short for JavaScript Object Notation, and is usually pronounced like the name “Jason”. We want to learn JSON syntax because it's used very frequently, takes 5 minutes to learn, and most of the websites store and send data in JSON format. XML is another text format used widely in websites for storing and sending data. JSON is better as it's faster and easier to read. A good link for JSON basics is here:

https://www.w3schools.com/Js/js_json_intro.asp

JSON defines a syntax, which can be used to store data in a text file for any purpose. JSON’s format is derived from JavaScript object syntax, but it is entirely text-based. It is a key-value data format that is typically rendered in curly braces. You can write a utility or pgm to extract key-value pair from this json file. Most of the web programming languages, as well as scripting/interpreted languages (as python, perl, etc) offer inbuilt support for parsing JSON files.

JSON is not just for Javascript, and has nothing to do with Javascript, exept that it's syntax is derived from Javascript, and so we have included it here right after the Javascript section. It may be helpful to read into material on Javascript.

ex: test.json => Here we have 3 keys and 3 values corresponding to those 3 keys. Key "first_name" has a value "Sammy", and so on. keys and values are separated by colon (:). Note there is a comma separating key/value pairs, but no comma for the last entry.

{

"first_name" : "Sammy",
"last_name" : "Shark",
"online" : true
}

Many webservers return data as JSON strings, which are JSON object literal or JSON array enclosed within single quotes. The 2 types of JSON strings are as follows:

JSON object literal: The JSON object literal is enclosed in curly braces. example as shown above. This is in key-data format.
JSON array: The JSON array is enclosed within square brackets. ex: ["Ford", "BMW", "Fiat"]. This is not for key-data, It's used when you have a set of data, not in key:data format.

NOTE: JSON strings can also be a combination of the 2 types above by having object literal nesten within array or vice versa, i.e ["Ford", {"make": "model1"}, "BMW, {"make":"model2"}]. Depending on whether that element is "object literal" or "array", we access it differently. Shown later.

To make these JSON strings, we would enclose them in single quotes as in ex here => ' { first_name": "sammy" ... } '

In JS, these json strings are parsed using JSON.parse() function which converts them into JS objects.

Even though JSON is derived from JS, there are few differences:

In JS or HTML files, the json object is set as a var. i.e in above ex, we can write person = { first_name: "Sammy", ... }. Then the variable person holds this js object. We access this object various ways as:
- Dot notation: person.first_name or assign value as person.first_name="meme"
- Array notation: person["first_name"] or assign value as person["first_name"] = "meme"
In JS, Strings always need to be in quotes( either single quotes or double quotes). But in JSON, strings always need to be in double quotes. Reason:??
In JS, keys can be strings, numbers or identifier names. while in JSON keys can only be strings. So, in jS keys do not need to be in quotes (except for when the keys are strings. When they are strings, we can use either single quotes or double quotes). But in JSON files, keys can only be strings and as such always need to be in double quotes.
In JSON, values may be string, number, another json object (can have more nested key value pair), array, boolean (true or false) or null. Values are in double quotes when they are also strings.
1. Value as JSON object literal => { "employee":{"name":"John", "age":30, "city":"New York"} }
2. Value as array => { "employees":["John", "Anna", "Peter"] } => This is in cases where you have more than 1 value. In this case, we don't have a way to represent these using "object literal" as they can only be in key:data format. So, we added this array format, so that all kinds of data can be represented using combo of { } and [ ].

Accessing JSON entries:

A very important concept in JSON is to know how to access various entries in this JSON object literal. When the JSON object has arrays and literals, with other JSON objects nested within each other. it becomes complicated. There's online JSON parsers and validators, which will show JSON files neatly formatted, so that you can access various values.

Here's one such validator: https://jsononline.net/json-validator

ex: var person =

{
  "data": {
     "current_condition": [{
        "cloudcover": "0",
         ....
         },{
        "cloudcover": "5", ...
        }]
       "past-condition": [{....}]
   }
   "info" { .... }
}

These elements can be accessed via array notation as shown:

person["data"]["current_condition"][1]["cloudover"] => This returns "5". Here 1st element "data" is "object literal" with key data format, so we access it in associative array style, i.e person["data"]. This returns the whole "data" content in "data". "data" itself is object literal in key:data format, as it's within { }. "current-condition" is the key, while data is an array, as it's within [ ]. So, person["data"]["current_condition"] points to "data" for key "current_condition". The data is an array as shown.

[{"cloudcover": "0",...},{"cloudcover": "5", ...}]

This array has 2 entries, so we refer it using array[0] and array[1]. person["data"]["current_condition"][1]points to 2nd index of array 
and is equal {"cloudcover": "5", ...}. Now this is an "object literal" with multiple entries in key:data format. We just provide the key of the data 
we are interested in. Here we do:

person["data"]["current_condition"][1]["cloudcover"] which returns data "5" for key "cloudcover"

Nav view search

Navigation

Search

JSON