JSON
What is JSON?
✘ JSON: JavaScript Object Notation
✘ Used for storing and exchanging data
✘ Text, with syntax similar to JavaScript object and
array literals:
✘ JSON is language independent as it is simply text
and can be read by any programming language
What you can do with JSON
✘ Exchange data between browser and server
✘ JavaScript objects can be converted into JSON and
sent to the server
✘ JSON received from the server can be converted
into JavaScript objects
What JSON Looks Like
Example of a JSON
representing
information about a
book
JSON Syntax
The JSON syntax is a subset of the JavaScript syntax
✘ Data is in name/value pairs, separated by commas
✘ Curly ‘{ }’ braces hold objects
✘ Square brackets ‘[ ]’ hold arrays
JSON Data
JSON data is written as name/value pairs.
“name” : “Rommel”
“school” : “CPU”
“college” : “College of Computer Studies”
Note: JSON names require double quotes while
JavaScript names don’t.
JSON Evaluates to JavaScript Objects
JSON JavaScript
✘ keys must be strings, ✘ keys can be strings,
written with double numbers, or identifier
quotes names
JSON Values Vs JavaScript Values
✘ string ✘ any of the JSON values
✘ number ✘ functions
✘ object (JSON object) ✘ date
✘ array ✘ undefined
✘ boolean
✘ null
JSON Construction
JSON.parse()
✘ When a web server sends data, it is always in the
form of a string
✘ Upon receiving it, parse the data with JSON.parse()
so the data becomes a JavaScript object
JSON.parse()
✘ Data from the server:
✘ JSON.parse() to convert into JavaScript object:
Notes
✘ Make sure the text is written in JSON format, or else
you will get a syntax error.
✘ An AJAX request can be used to get data from the
server.
✘ If the server’s response is written in JSON format,
the string can be parsed into a JavaScript object.
Exceptions
✘ Date objects are not allowed in JSON.
✘ Write it as a string if you need to include a date
✘ Then convert it back into a date object
✘ Avoid using functions in JSON. They will lose their
scope, you would need to use eval() to convert them
back into functions
JSON Stringify
✘ Data sent to a web server has to be a string
✘ Convert a JavaScript object into a string with
JSON.stringify()
JSON Stringify
✘ JavaScript object
✘ Convert to string
✘ Result
We’ve Covered
✘ JSON basics – syntax, data, construction
✘ JSON.parse() – converting a string received from a
web server into JavaScript objects
✘ JSON.stringify() – converting JavaScript objects into
strings to be sent to a web server
Activity
✘ Change the
displayed
name
✘ Prompt the
user for his
name and age
then display
the results
