Working With JSON
Tags: javascript, json, webdev, codenewbie
Published: 2022-07-29 16:28:33

**JSON INTRO** 

- JSON stands for JavaScript Object Notation.
- JSON is a text format for storing and transporting data.
- JSON is a lightweight data-interchange format
- JSON is "self-describing" and easy to understand.
- JSON is used to send data between computers
- JSON is language independent.
- The JSON format was originally specified by Douglas Crockford.
- JavaScript has a built in function for converting JSON strings into - JavaScript objects: JSON.parse()
- JavaScript also has a built in function for converting an object into a JSON string: JSON.stringify()

This example is a JSON string: 
 `'{"name":"John", "age":30, "car":null}'`

**JSON RULES**

- Data is in name/value pairs
- Data is separated by commas
- Curly braces hold objects
- Square brackets hold arrays
- In JSON, keys must be strings, written with double quotes.
- In JSON, values must be one of the following data types, a string, a number, an object, an array, a boolean, null


**JSON Files**

- The file type for JSON files is ".json"
- The MIME type for JSON text is "application/json"

**JSON.parse()**

- When receiving data from a web server, the data is always a string.
- Parse the data with JSON.parse(), and the data becomes a JavaScript object.

Example 1 : 
`const obj = JSON.parse('{"name":"John", "age":30, "city":"NewYork"}');`

Example 2 : Convert a string into a date:

- Date objects are not allowed in JSON.
- If you need to include a date, write it as a string.
- You can convert it back into a date object later.


**JSON.parse() exceptions**

Question: What is Reviver Function ? 
- The second parameter, of the JSON.parse() function, called reviver. 
- The reviver parameter is a function that checks each property, before returning the value.
- Convert a string into a date, using the reviver function below

Example: Parsing Dates

`const text = '{"name":"John", "birth":"1986-12-14", "city":"New York"}';
const obj = JSON.parse(text, function (key, value) {
  if (key == "birth") {
    return new Date(value);
  } else {
    return value;
  }
});`

`Example: Parsing Functions

const text = '{"name":"John", "age":"function () {return 30;}", "city":"New York"}';
const obj = JSON.parse(text);
obj.age = eval("(" + obj.age + ")");`



**JSON.stringify()**

- When sending data to a web server, the data has to be a string.
- Convert a JavaScript object into a string with JSON.stringify().

Example : 
`const myJSON = JSON.stringify({name: "John", age: 30, city: "New York"});`


**JSON.stringify() exceptions**

Example: Stringify Dates

- In JSON, date objects are not allowed. The JSON.stringify() function will convert any dates into strings.

`const obj = {name: "John", today: new Date(), city : "New York"};
const myJSON = JSON.stringify(obj);
output: '{"name":"John","today":"2022-07-29T15:46:01.089Z","city":"New York"}'`

Example: Stringify Functions

- In JSON, functions are not allowed as object values.
- The JSON.stringify() function will remove any functions from a JavaScript object, both the key and the value.
- This can be omitted if you convert your functions into strings before running the JSON.stringify() function.
- If you send functions using JSON, the functions will lose their scope, and the receiver would have to use eval() to convert them back into functions.

`const obj = {name: "John", age: function () {return 30;}, city: "New York"};
const myJSON = JSON.stringify(obj);
output: '{"name":"John","city":"New York"}'`

**JSON Object**

- This is a JSON string: '{"name":"John", "age":30, "car":null}'
- Inside the JSON string there is a JSON object literal: {"name":"John", "age":30, "car":null}
- JSON object literals are surrounded by curly braces {}.
- JSON object literals contains key/value pairs.
- Keys and values are separated by a colon.
- It is a common mistake to call a JSON object literal "a JSON object".
- JSON cannot be an object. JSON is a string format.

Example : 

`myJSON = '{"name":"John", "age":30, "car":null}';
myObj = JSON.parse(myJSON);
output: { name: 'John', age: 30, car: null }`


**JSON Array**

- This is a JSON string: '["Ford", "BMW", "Fiat"]'
- Inside the JSON string there is a JSON array literal: ["Ford", "BMW", "Fiat"]

Example:
`myJSON = '["Ford", "BMW", "Fiat"]';
myArray = JSON.Parse(myJSON);
output: [ 'Ford', 'BMW', 'Fiat' ]`