JSON – Introduction
JavaScript object notation
‘{“name”: “John”, “age”:30, “car”:null}’
This is an object with 3 properties, name, age, car, with each property having a value
JSON is a lightweight data-interchange format
Plain text written in JS object notation
Used to send data between computers
Language independent
You can parse the JSON string with a JS program and access the data as an object:
Let personName = [Link];
Let personage = [Link];
JS has a fxn for JSON string => JS object
[Link]()
Object into JSON string =>
[Link]()
JSON makes it possible to store JS objects as text, and text is always one of the legal formats.
JSON Syntax
Rules:
- data in name/value pairs
- data separated by commas
- curly braces hold objects
- square brackets hold arrays
JSON data- a name and a value
JSON names require double quotes
Name/value pair consists of a field name (in double quotes) followed by a colon, followed by a value:
“Name”:”John”
JSON-Evaluates to JS objects
-JSON format is almost identical to JS objects
-in JSON, keys must be strings, written with double quotes:
JSON
{“name”:”John”}
In JS, keys can be strings, numbers or identifier names:
JavaScript
{name:”John”}
In JSON, values must be one of the following data types:
a string
a number
an object
an array
a boolean
null
In JavaScript values can be all of the above, plus any other valid JavaScript expression, including:
a function
a date
undefined
JSON numbers must be an int or a float
Values in JSON can be objects
{
"employee":{"name":"John", "age":30, "city":"New York"}
}
arrays
{
"employees":["John", "Anna", "Peter"]
}
Booleans
{"sale":true}
Null
{"middlename":null}
A common use of JSON is to exchange data to/from a web server.
When receiving data from a web server, the data is always a string.
Parse the data with [Link](), and the data becomes a JavaScript
object.
Example - Parsing JSON
Imagine we received this text from a web server:
'{"name":"John", "age":30, "city":"New York"}'
Use the JavaScript function [Link]() to convert text into a JavaScript object:
const obj = [Link]('{"name":"John", "age":30, "city":"New York"}');
use the object in your page
<p id="demo"></p>
<script>
[Link]("demo").innerHTML = [Link];
</script>
A JSON value cannot be a date, it must be stored as a string and then convert to a
date after
JSON cannot be a function, make it as a string and parse it and convert it back
later. (But avoid using them as they will lose their scope and you’ll have to revert
them back later using eval().)
[Link]()
Sending data to a web server requires it to be a string (aka sending text).
Convert your JS object into a string with [Link]()
const obj = {name: "John", age: 30, city: "New York"};
convert to string using JS fxn
const myJSONstring = [Link](obj);