Java script and json

JavaScript and JSON Front end development tool

Overview • Required knowledge before working with JS and JSON • What is JSON? • Why use JSON? • JSON vs XML • Syntax • Data Types • Usage • Simple example

What you should know before working with JavaScript and JSON. • JavaScript and JSON is not for a beginner • JSON is that it is a conversation that happens between your server and your browser. • You should be familiar with building online projects and know how HTML works.

What is JSON? JSON is ( JavaScript Object Notation ). • Format for sharing data. • Derived from JavaScript. • Language independent • An alternative to XML

What is JSON? JSON is NOT .. • Overly Complex • A “document” format • A markup language • A programming language

Why use JSON? • Easy to read Advantage var person = { "name":"John", "age":30, "attendance":true, "car":null }

Why use JSON? • Easy to parse Advantage var person = { "name":"John", "age":30, "attendance":true, "car":null } // returns John person.name;

Why use JSON? • Leaner than XML Advantage var person = { "name":"John", "age":30, "attendance":true, "car":null } <persons> <person> <name>John</name> <age>30</age> </person> </persons>

Why use JSON? • Easy to read • Easy to parse Advantage • Leaner than XML • Supported by all major JavaScript frameworks • Supported by most backend technologies

JSON vs XML • Self describing, human readable. • Hierarchical (values within values) • Can be parsed and used by lots of programming languages Much like XML

JSON vs XML • JSON doesn't use end tag • JSON is shorter Not like XML • JSON is quicker to read and write • JSON can use arrays

Syntax • Unordered sets of name/value pairs • Begins with { (left brace) • Each name is followed by : (colon) • Name/value pairs are separated by , (comma) • Ends with } (right brace)

Syntax var person = { "name":"John", "age":30, "attendance":true, "car":null } JSON Example

Syntax Arrays in JSON • An ordered collection of values • Begins with [ (left bracket) • Name/value pairs are separated by , (comma) • Ends with ] (right bracket)

Syntax var person = { "name":"John", "age":30, "cars":[ "Ford", "BMW", "Fiat" ] } JSON Array Example

Data Types • A String • A Number • An Array • An Object (JSON object) In JSON, values must be one of the following data types: • A Boolean • Null

Data Types Strings in JSON must be written in double quotes. JSON String { "name":"John" } Numbers in JSON must be an integer or a floating point. JSON Numbers { "age":30 }

Data Types Objects as values in JSON must follow the same rules as JSON objects. JSON Objects { "employee":{ "name":"John", "age":30, "city":"New York" } } Values in JSON can be arrays. JSON Arrays { "employees":[ "John", "Anna", "Peter" ] }

Data Types Values in an array can also be another array, or even another JSON object: JSON Arrays employee = { "name":"John", "age":30, "cars": [ { "name":"Ford", "models":[ "Fiesta", "Focus"] }, { "name":"BMW", "models":[ "320", "X3", "X5" ] }, { "name":"Fiat", "models":[ "500", "Panda" ] } ] }

Data Types • JSON Objects: Unordered key/value pairs wrapped in { } • JSON Arrays: Ordered key/value pairs wrapped in [ ] • Each key/value pair is separated by a comma (,). • Keys and values are separated by a colon (:). Object & Array • Keys must be strings, and values must be a valid JSON data type (string, number, object, array, boolean or null).

Data Types Values in JSON can be true/false. JSON Booleans { "sale":true } Values in JSON can be null. JSON null { "middlename":null }

Usage Anywhere and everywhere! eTime

Simple example Parsing JSON Imagine we received this text from a web server: '{ "name":"John", "age":30, "city":"New York"}' Use the JavaScript function JSON.parse() to convert text into a JavaScript object: var obj = JSON.parse('{ "name":"John", "age":30, "city":"New York"}');

Recourses https://www.w3schools.com/js/js_json.asp The JSON basics course for Jeff Fox Javascript and JSON course for Ray Villalobos

Java script and json

More Related Content

What's hot

Similar to Java script and json

Recently uploaded

Java script and json