- Notifications
You must be signed in to change notification settings - Fork0
dinanathsj29/json-javascript-object-notation-crash-course
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Hi All, I'mDinanath Jayaswal, Senior UI/Web Developer and Adobe Certified Expert Professional, I wanna welcome you toJSON (JavaScript Object Notation) Crash Course for Beginners. This course/tutorial will give you a complete understanding of JSON syntax, data types, and formatting.
This course will share the under the hood basic understanding of JSON using the practical implementation in your web development project. Here we will start from scratch/basics & go to a higher level very quickly.
This course is for anyone interested in quickly learning JSON & it's power to utilize it in Web Development.
This Course/Tutorial is ideal for:
- Anyone who wants to learn JSON from scratch
- Anyone interested in learning JSON & JSON Schema
- Programmers and Developers at any level
- Web developers
- Application developers
- Anyone who wants to interchange data between clients and servers
- Anyone who wants to choose JSON as the data interchange format in their REST API design
This course/Tutorial is for anyone and everyone, Almost everyone!
JSON stands for JavaScript Object Notation is text-based and human-readable. JSON has become a widely accepted and popular format for data due to its platform-neutral nature, lightweight format, and it’s the ability to convert directly to native JavaScript Objects. JSON is being used everywhere from Web APIs to NoSQL databases, to server-side language libraries and client-side frameworks.
JSON has significantly improved server-to-browser communications, especially when it comes to AJAX. JSON is better than XML (eXtensible Markup Language) and more popular! Easily exchange data between client and server applications. JSON is easy to use and built for storing and exchanging data.
After completing/attending this JSON Course/Tutorial, participants should be able to:
- Understand what and why JSON
- Use JSON format confidently
- Exchange Data with JSON format and use JSON in Web development/project
- Basic knowledge and understandings of HTML, CSS, JavaScript and ASP/PHP
- Knowledge of using any text editor and a web browser
- Basics of Browser and Internet
- A basic understanding of Client Side vs Server Side
Before starting with JSON it is advisable to view and go through following course/tutorials to get knowledge of:
- Web Design Development Technology Fundamentals -Web Design Development Technology Fundamentals,
- HTML5 -HTML5 Essentials Tutorial,
- CSS3 -CSS3 Fundamentals Tutorial,
- JavaScriptJavaScript tutorial for Beginners
- CSS3 -CSS3 Fundamentals Tutorial,
- HTML5 -HTML5 Essentials Tutorial,
- 1.1.What is JSON?
- 1.2.Why use JSON?
- 1.3.What JSON is not?
- 1.4.Usage of JSON
- 1.5.Characterstics of JSON
- 1.6.JSON Syntax
- 1.7.JSON vs XML
- 1.8.JSON vs XML Trends
- 1.9.JSON Data Types
- 1.10.Access-Modify JSON object data
- 1.11.JSON Parse
- 1.12.JSON Stringify
- 1.13.JSON Arrays
- 1.14.Nested JSON Objects
- 1.15.Looping through JSON Array-Objects
- 1.16.Marshalling and Unmarshalling
- JSON stands for
JavaScript Object Notation - JSON is a syntax for storing and exchanging data
- JSON is a lightweight data-interchange, Data representation format
- JSON is
self-describing, an easier to understand, easy to use and alternative format toXML (eXtensible Markup Language)also widely used these days - JSON is often used with
AJAX (Asynchronous JavaScript and XML) - JSON is language independent (JSON uses JavaScript syntax, with text-only format, Text can be read and used as a data format by most/any modern programming language)
- JSON is commonly used for APIs and Configurations
- The JSON format was specified and popularized by `Douglas Crockford`- The filename extension is `.json`- JSON internet Media type is `application/json`JSON is a pretty simple data exchange format which helps to communicate between JavaScript and server-side technologies like CGI (Common Gateway Interface), PERL, ASP (Active Server Pages), Java, JSP (Java Server Pages), PHP(HyperText PreProcessor / Personal Home Page), .NET, Cold Fusion CFML, NodeJS, Servelets, WCF (Windows Communication Foundation) and more
JSON has significantly improved server-to-browser communications, especially when it comes to AJAX. Most of today's APIs return the response in JSON format as it is much easier to load, read and process JSON compared to XML, making it very popular.
JSON uses, follows and based on Object Literal Notation syntax of JavaScript. JSON friendly Data Structures and friendly conventions play well with other different languages and platforms
Example: Company X provides
JSON REST API { }for the products related data, this WEB API is written with ASP.NET. User/Client Y or Z can make the call to this API by Java or jQuery or any other language to get JSON response.
Other than JSON, XML (eXtensible Markup Language) use to be the only option/alternative for open data interchange.
- JSON is text-based and human-readable, easily exchange data between client and server applications
- it's a lightweight data-interchange format that is quickly becoming the default format for data exchange on the internet today!
- JSON is better than XML and more popular!
- JSON is easy to use and built for storing and exchanging data
- Since the JSON format is text only, it can easily be sent to and from a server and used as a data format by any programming language
JSON has become a widely accepted and popular format for data due to its platform-neutral nature, lightweight format, and it’s the ability to convert directly to native JavaScript Objects. JSON is being used everywhere from Web APIs to NoSQL databases, to server-side language libraries and client-side frameworks.
JSON has significantly improved server-to-browser communications, especially when it comes to AJAX. JSON is better than XML and more popular! Easily exchange data between client and server applications. JSON is easy to use and built for storing and exchanging data.
JSON is extremely popular in web applications because it's lightweight, designed to be a language of independent and easy to read and write transfer data easily between server and client.
- JSON is not a Programming/Markup language
- JSON is not dependent on JavaScript language
- Many people treat JSON as a javascript object, but it is not! JSON is just string representation inspired from JavaScript Object structure
JSON is programming language independent Data Interchange Format - an only text-based easy to use and understand the format used to Import and Export data between different platforms- It is used while writing JavaScript-based applications that include browser extensions and websites
- The JSON format is used for serializing and transmitting structured data over a network connection
- It is primarily used to transmit data between a server and web applications (client and server)
- Web services and APIs use JSON format to provide public data
- It can be used with different platform-independent modern programming languages
- JSON is used in Web APIs as well as NoSQL databases
- JSON is pretty easy to read, write and understand
- JSON is a lightweight text-based interchange format
- JSON is language independent
- JSON uses, follows and based on Object Literal Notation syntax of JavaScript
- JSON is widely used to exchange, send and receive data from server to client and vice versa
- JSON represent data in the pair of Curley braces and in the form of key-value pairs ie. property and data/value ie. attribute and data/value e.g.
var Employee = { "employeeName": "Dinanath", "employeeId": "101", "empId": 101} - Transfer data easily between Server and Client
- JSON syntax is very simple and uses
name : value pairorkey : value pair
The JSON syntax is a subset of the JavaScript syntax. JSON syntax is derived from JavaScript object notation syntax:
- Data is in name/value pairs
- Data is separated by commas
- Curly braces hold objects
- Square brackets hold arrays
JSON format starts withcurley brace/bracket { andends with curley brace/bracket }. In-between curley brace we can put"name" and value or"key":value or"property":value/data pair, every property of the object is separated by comma.
JSON represents data in thepair of curly braces and in the form of key-value pairs ie property and data. We can separateProperty Name with the help ofcolon: then specifyproperty Value and multiple properties are separated withcomma,.
- JSON, keys must be strings, written with "double quotes", JavaScript names don't.To access or read data from a JSON object, we simply need to use property name with. dot notation, will get all IntelliSense as soon as will use anyjsonObjectName.propertyName i.e.JsonObjectName.propertyName or so.
As soon as we assign JSON format/values to any JavaScript variable, it becomes a JavaScript object to which we can access via. dot notation.
In JSON, values must be one of the following data types:
- a string
- a number
- an object (JSON object)
- an array
- a boolean
- null
Syntax & Example:
1.6.1-employee.json
{"employeeName":"Dinanath","employeeId":100,"department":"IT-Development","role":"Sr. UI Developer","salary":100000}Syntax & Example:
1.6.2-technology.json
{"technologyName":"JSON (JavaScript Object Notation)","inventor":"Douglas Crockford","usage":"Data storage and exchange format","version":1.0,"cost":0,"license":"Open Source - MIT"}Syntax & Example:
1.6.3-person.json
{"name":"Dinanath","age":50,"country":"India","height":5.6,"color":"Black-Medium","married":true}The JSON format is almost exactly alike to JavaScript objects.
| JSON Syntax | JavaScript Object Syntax |
|---|---|
JSONKeys must be strings, written with double quotesExample: { "name": "Dinanath" } | JavaScript ObjectKeys can be strings, numbers, or identifier namesExample: { name: "Dinanath" } |
JSON,string values must be written with double quotesExample: { "country": "India" } | JavaScript Object,string values can be written with double or single quotesExample: { country: 'India' } |
JSON Object: { "name": "Dinanath", "age": 50, "married": true } | JavaScript Object: { name: 'Dinanath', age: 50, married: true } |
| JSON | XML |
|---|---|
|
|
| JavaScript Object Notation | eXtensible Markup Language |
JSON useskey : value orname : value pair to store data (JSON doesn't use end tag) | XML usestags < value >, element or node to store data |
| JSON is shorter, JSON has a more compact style than XML | XML is pretty larger/lengthy as we need to open and close tags for everyname orkey |
JSON isquicker and easier to read and write | XML islittle difficult to read and write as we need to write many tags |
| JSON can use arrays | XML cant use arrays, it uses tags |
JSON can beparsed by a standard JavaScript function | XML has to beparsed with an XML parser |
| For AJAX applications, JSON is faster and easier than XML | XML is much more difficult to parse than JSON |
| JSON uses less data overall, so reduces the cost and increases the parsing speed | The XML parsing process can take a long time due to verbose nature of xml and its element structure |
JSON uses amap data structure | XML uses atree data structure |
| JSON - JavaScript Object Notation - coding structure and syntax:
| XML - eXtensible Markup Language - coding structure and syntax:
|
Both JSON and XML can be used to exchange, send and receive data from a web server
- JSON and XML both are
self-describing (human-readable) - JSON and XML both can be parsed and used by various programming languages
- JSON and XML both can store hierarchical data structure (values within values)
- Both JSON and XML can be fetched with JavaScript
XMLHttpRequestmethodology
Syntax & Example:
XML (eXtensible Markup Language) 1.7.1-technology.xml
<Technology> <technologyName>XML (eXtensible Markup Language)</Technology> <inventor>Ed Mosher</inventor> <usage>Data storage and exchange format</usage> <version>1.0</version> <cost>0</cost> <license>Open Source - MIT</license></Technology>
Syntax & Example:
JSON (JavaScript Object Notation) 1.7.2-technology.json
{"technologyName":"XML (eXtensible Markup Language)","inventor":"Ed Mosher","usage":"Data storage and exchange format","version":1.0,"cost":0,"license":"Open Source - MIT", }- JSON is better than XML and extremely popular now a days!
Json supports values of the following data types:
| JSON Valid Data Types | Data Types Description |
|---|---|
| String | Strings in JSON must be written in double quotes"Hello", "Dinanath", "I/We" |
| Number | Numbers in JSON can be an integer or a floating point supports all types of numbers - complete number, decimal, negative number, scientific notation number)10, 2.5, -10, 2.5e10 |
| Object | Most complex but widely used Data types { "key": "value" } { "name": "Dinanath", "id": 101 } |
| Array | JSON value can be array which holds multiple items of various data types[1,2,3,4,5] ["Dinanath", "Akash", "Ambar", "Sagar", "Suraj"] |
| Boolean | true or false { "isDone":true } |
| null | null (nothing/empty value){ "status":null } |
JSON values cannot be of following data types:- a function- a date- undefinedJavaScript object or JSON object data can be accessed and modified by two syntax or ways:
- Dot notation syntax
- Square bracket syntax
To access, read or modify JSON object data, we simply need to use property name with. dot notation, will get all IntelliSense as soon as will use anyjsonObjectName.propertyName or so.
As soon as we assign JSON format/values to any JavaScript variable, it becomes a JavaScript object to which we can access via. dot notation.
Syntax:
jsonObjectName.propertyNameorTechnologyJSON.technologyName
Second or another way to access, read or modify JSON object data is Square bracket notation
Syntax:
jsonObjectName.['propertyName']orTechnologyJSON.['technologyName']
Syntax & Example:
1.10.1-access-modify-json-data.html
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>json-access-modify-data</title><scripttype="text/javascript">// creating JSON objectvarTechnologyJSON={"technologyName":"JSON (JavaScript Object Notation)","inventor":"Douglas Crockford","usage":"Data storage and exchange format","version":1.0,"cost":0,"license":"Open Source - MIT"}// accessing data from a json object// JsonObjectName.propertyName// Dot notation syntaxconsole.log(TechnologyJSON.inventor);document.write('<li>'+TechnologyJSON.inventor+'</li>');document.write('<li>'+TechnologyJSON.usage+'</li>');// Square bracket syntaxconsole.log(TechnologyJSON['inventor']);document.write('<li>'+TechnologyJSON['inventor']+'</li>');document.write('<li>'+TechnologyJSON['license']+'</li>');// modifying datavartechName1=TechnologyJSON.technologyName='XML';console.log(techName1);document.write('<br/><br/><li>'+techName1+'</li>');vartechName2=TechnologyJSON['technologyName']='AJAX';console.log(techName2);document.write('<br/><br/><li>'+techName2+'</li>');</script></head><body></body></html>
JSON.parse()method converts a JSON string to JSON array/objectJSON.parse()Parse a string (written in JSON format) and return a JavaScript object- Usually data receiving from a web server is string, with
JSON.parse()method one can Parse the data to JavaScript object JSON.parse()was first added to thefifth edition of ECMAScript, which as of2017is supported by all major browsers
Syntax & Example:
1.11.1-json-parse.html
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>json-parse</title><scripttype="text/javascript">// creating string object to hold json like datavarTechnologyStringObj='{ "technologyName": "JSON (JavaScript Object Notation)", "inventor": "Douglas Crockford", "usage": "Data storage and exchange format", "version": 1.0, "cost": 0, "license": "Open Source - MIT" }';// parse a string object to jsonvarTechnologyJSON=JSON.parse(TechnologyStringObj);console.log(TechnologyJSON);// accessing data from a json object// JsonObjectName.propertyNameconsole.log(TechnologyJSON.technologyName);</script></head><body></body></html>
JSON.stringify()method converts a JSON object or JSON array into a stringJSON.stringify()method converts a JavaScript object or value to a JSON string- When sending data to a web server the data has to be a string
Syntax & Example:
1.12.1-json-stringify.html
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>json-stringify</title><scripttype="text/javascript">// json objectvarTechnologyJSON={"technologyName":"JSON (JavaScript Object Notation)","inventor":"Douglas Crockford","usage":"Data storage and exchange format","version":1.0,"cost":0,"license":"Open Source - MIT"};console.log(TechnologyJSON);console.log(TechnologyJSON.technologyName);// by default json object are not printed in html view - it shows `[object Object]`document.write('initial TechnologyJSON object:',TechnologyJSON);// parse a json object to stringvarTechnologyJSONStringify=JSON.stringify(TechnologyJSON);// once json object converted to string - it can be available/placed for viewdocument.write('<br/> <br/> <strong>JSON.stringify</strong> :',TechnologyJSONStringify);console.log('JSON.stringify TechnologyJSONStringify: ',TechnologyJSONStringify);console.log(TechnologyJSONStringify.technologyName);//undefined// parse a string object to jsonvarTechnologyJSONObj=JSON.parse(TechnologyJSONStringify);console.log(TechnologyJSONObj);console.log(TechnologyJSONObj.technologyName);</script></head><body></body></html>
- We can store more than one record or more than on technology, employee or required data in the JSON object, this is when JSON arrays can be used
- Arrays in JSON are as same as JavaScript arrays
A JSON array can contain multiple objects in [ square bracket separated with comma, ]
- Wrap the objects in
[ square brackets ] - Each object must be seperated with a comma
{ }, Object = [ { }, { }, { }, { } ]
Syntax & Example:
1.13.1-json-array.html
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>json-array</title><scripttype="text/javascript">// creating JSON objectvarTechnologiesJSONArray=[{"technologyName":"JSON (JavaScript Object Notation)","usage":"Data storage and exchange format","version":1.0,"cost":0.00},{"technologyName":"HTML (HyperText Markup Language)","usage":"To create a web page pages/web sites/web apps","version":5.0,"cost":0.00}];console.log(TechnologiesJSONArray);// accessing data from a json object// jsonObject[arrayPosition/ indexPosition].propertyName;console.log(TechnologiesJSONArray[0].version);// 1.0console.log(TechnologiesJSONArray[1].version);// 5.0document.write('<li> <strong>Technology Name:</strong> '+TechnologiesJSONArray[0].technologyName+' || <strong>Version is:</strong> '+TechnologiesJSONArray[0].version+'</li>');document.write('<li> <strong>Technology Name:</strong> '+TechnologiesJSONArray[1].technologyName+' || <strong>Version is:</strong> '+TechnologiesJSONArray[1].version+'</li>');</script></head><body></body></html>
- We know that JSON objects are surrounded by curly braces
{ } - As per logic and requirements we can store multiple objects inside a main JSON object
Object = { { }, { }, { }, { } }
Syntax & Example:
1.14.1-json-nested-objects.html
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>json-nested-objectes</title><scripttype="text/javascript">// creating JSON objectvarTechnologyJSONObject={"Json":{"technologyName":"JSON (JavaScript Object Notation)","usage":"Data storage and exchange format","version":1.0,"cost":0.00},"Html":{"technologyName":"HTML (HyperText Markup Language)","usage":"To create a web page pages/web sites/web apps","version":5.0,"cost":0.00},};console.log(TechnologyJSONObject);// accessing data from a json object// jsonMainObject.jsonSubObjectName.propertyName;console.log(TechnologyJSONObject.Json.version);// 1.0console.log(TechnologyJSONObject.Html.version);// 5.0// square bracket syntaxconsole.log(TechnologyJSONObject.Json["version"]);// 1.0console.log(TechnologyJSONObject.Html["version"]);// 5.0document.write('<li> <strong>Technology Name:</strong> '+TechnologyJSONObject.Json.technologyName+' || <strong>Version is:</strong> '+TechnologyJSONObject.Json.version+'</li>');document.write('<li> <strong>Technology Name:</strong> '+TechnologyJSONObject.Html.technologyName+' || <strong>Version is:</strong> '+TechnologyJSONObject.Html.version+'</li>');</script></head><body></body></html>
- One can access JSON array values by using a
fororfor-inloop:
Syntax & Example:
1.15.1-looping-json-array.html
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>looping-json-array</title><scripttype="text/javascript">// creating JSON objectvarTechnologyJSON={"technologyName":"JSON (JavaScript Object Notation)","usage":"Data storage and exchange format","version":1.0,"cost":0.00,"keywords":['json','JavaScript','Object','Notation','key','value','key value pair']};console.log(TechnologyJSON);// accessing data from a json object// jsonMainObject.jsonSubObjectName.propertyName;console.log(TechnologyJSON.keywords);console.log(TechnologyJSON.keywords[0]);// 1. for loopletkeywordsLength=TechnologyJSON.keywords.length;document.write('<h1> Technology keyword - For loop </h1>');for(letkeyword=0;keyword<keywordsLength;keyword++){document.write('<li>'+TechnologyJSON.keywords[keyword]+'</li>');}// 2. for in loopdocument.write('----------------------------------------------------');document.write('<h1> Technology keyword - For in loop </h1>');letkeywords=TechnologyJSON.keywords;for(letkwinkeywords){document.write('<li>'+TechnologyJSON.keywords[kw]+'</li>');}</script></head><body></body></html>
Syntax & Example:
1.15.2-looping-json-object.html
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>looping-json-object</title><scripttype="text/javascript">// creating JSON objectvarTechnologyJSON={"technologyName":"JSON (JavaScript Object Notation)","usage":"Data storage and exchange format","version":1.0,"cost":0.00,"keywords":['json','JavaScript','Object','Notation','key','value','key value pair'],"Html":{"technologyName":"HTML (HyperText Markup Language)","usage":"To create a web page pages/web sites/web apps","version":5.0,"cost":0.00},};console.log(TechnologyJSON);// accessing data from a json object// jsonMainObject.jsonSubObjectName.propertyName;console.log(TechnologyJSON.keywords);console.log(TechnologyJSON.keywords[0]);console.log(TechnologyJSON.Html);console.log('----------------------------------------------------');// for in loop// document.write('----------------------------------------------------');document.write('<h1> JSON Object keys </h1>');for(let_keyinTechnologyJSON){document.write('<li>'+_key+'</li>');}// document.write('----------------------------------------------------');document.write('<h1> JSON Object keys and Values</h1>');for(let_keyinTechnologyJSON){document.write('<li>'+_key+' : '+TechnologyJSON[_key]+'</li>');}// document.write('----------------------------------------------------');document.write('<h1> JSON Object - Inner objects keys and Values</h1>');for(let_keyinTechnologyJSON.Html){document.write('<li>'+_key+' : '+TechnologyJSON.Html[_key]+'</li>');}</script></head><body></body></html>
Syntax & Example:
1.15.3-looping-json-array.html
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>looping-json-array</title><scripttype="text/javascript">// creating JSON objectvarColorsJSON={"colors":["Cyan","Magenta","Yellow","Black","Red","Green","Blue"],"colorDetails":[{"colorName":"Red","colorHexCode":"#ff0000"},{"colorName":"Green","colorHexCode":"#00ff00"},{"colorName":"Blue","colorHexCode":"#0000ff"},]};console.log(ColorsJSON);// accessing data from a json object// jsonMainObject.jsonSubObjectName.propertyName;console.log(ColorsJSON.colors);console.log(ColorsJSON.colors[0]);console.log('----------------------------------------------------');// for loopdocument.write('<h1> Color Index & Color values - For loop </h1>');lettotalColors=ColorsJSON.colors.length;for(letcolorIndex=0;colorIndex<totalColors;colorIndex++){document.write('<li>'+colorIndex+" : "+ColorsJSON.colors[colorIndex]+'</li>');}// for in loopdocument.write('----------------------------------------------------');document.write('<h1> Color Index & Color values - For in loop </h1>');for(let_keyinColorsJSON.colors){document.write('<li>'+ColorsJSON.colors[_key]+'</li>');}document.write('----------------------------------------------------');document.write('<h1> Inner Color Index & Color values - For in loop </h1>');for(letmainKeyinColorsJSON.colorDetails){for(letinnerKeyinColorsJSON.colorDetails[mainKey]){document.write('<li>'+ColorsJSON.colorDetails[mainKey][innerKey]+'</li>');}}</script></head><body></body></html>
- Creating JSON data/object from custom objects
- Converting your custom object to a representation accepted by the client in the form of JSON
- ( Object --> JSON )
- The opposite of marshalling is unmarshalling - the creation of custom objects from XML, JSON and the like
- ( JSON --> Object )
- jQuery is a lightweight,
"write less, do more", JavaScript library - jQuery is a fast, small, feature-rich and easy to learn JavaScript library
- It makes things like
HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers - With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript
jQuery is just a JavaScript library- jQuery greatly simplifies JavaScript programming- All the power of jQuery is accessed via JavaScript, so having a strong grasp of JavaScript is essential for understanding, structuring, and debugging your code
We can download the jQuery library script files from jQuery official websitehttps://jquery.com/download/ or use CDN (Content Delivery Network / Content Distribution Network) links likehttps://cdnjs.com/libraries/jquery/ orhttps://developers.google.com/speed/libraries/
Syntax & Example:
2.json-with-jquery/2.1-jquery-json-basic.html
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>jQuery-json-basics</title><scriptsrc="./_library/jquery-3.4.1.min.js"></script><scripttype="text/javascript">$(document).ready(function(){// creating JSON objectvarTechnology={"technologyName":"JSON (JavaScript Object Notation)","usage":"Data storage and exchange format","version":1.0,"cost":0.00}// accessing data from a json object// JsonObjectName.propertyNameconsole.log(Technology.technologyName);// JSON (JavaScript Object Notation)varresultText='';resultText+='Technology Name = '+Technology.technologyName+'<br/>';resultText+='Usage = '+Technology.usage+'<br/>';resultText+='Version = '+Technology.version+'<br/>';resultText+='Cost = '+Technology.cost+'<br/>';// assign data to html element$('#textContainerDiv').html(resultText);});</script></head><body><divid="textContainerDiv"></div></body></html>
Syntax & Example:
2.json-with-jquery/2.2-jquery-json-array.html
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>jQuery-json-array</title><scriptsrc="./_library/jquery-3.4.1.min.js"></script><scripttype="text/javascript">$(document).ready(function(){// creating JSON objectvarTechnologiesJSONArray=[{"technologyName":"JSON (JavaScript Object Notation)","usage":"Data storage and exchange format","version":1.0,"cost":0.00},{"technologyName":"HTML (HyperText Markup Language)","usage":"To create a web page pages/web sites/web apps","version":5.0,"cost":0.00}];// accessing data from a json object// jsonObject[arrayPosition/ indexPosition].propertyName;console.log(TechnologiesJSONArray[0].version);// 1.0console.log(TechnologiesJSONArray[1].version);// 5.0vartechnologyNameText=TechnologiesJSONArray[0].technologyName+'<br>';technologyNameText+=TechnologiesJSONArray[1].technologyName;// assign data to html element$('#textContainerDiv').html(technologyNameText);});</script></head><body><divid="textContainerDiv"></div></body></html>
Syntax & Example:
2.json-with-jquery/2.3-jquery-json-nested-object.html
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>jQuery-json-nested-objectes</title><scriptsrc="./_library/jquery-3.4.1.min.js"></script><scripttype="text/javascript">$(document).ready(function(){// creating JSON objectvarTechnologyJSONObject={"Json":{"technologyName":"JSON (JavaScript Object Notation)","usage":"Data storage and exchange format","version":1.0,"cost":0.00},"Html":{"technologyName":"HTML (HyperText Markup Language)","usage":"To create a web page pages/web sites/web apps","version":5.0,"cost":0.00},};// accessing data from a json object// jsonMainObject.jsonSubObjectName.propertyName;console.log(TechnologyJSONObject.Json.version);// 1.0console.log(TechnologyJSONObject.Html.version);// 5.0// square bracket syntaxconsole.log(TechnologyJSONObject.Json["version"]);// 1.0console.log(TechnologyJSONObject.Html["version"]);// 5.0vartechnologyNameText=TechnologyJSONObject.Json.technologyName+'<br>';technologyNameText+=TechnologyJSONObject.Html.technologyName;// assign data to html element$('#textContainerDiv').html(technologyNameText);});</script></head><body><divid="textContainerDiv"></div></body></html>
- Create and use a simple JSON data store for your web or mobile app:http://myjson.com
- JSONPlaceholder:https://jsonplaceholder.typicode.com/
About
Learn and use JSON JavaScript Object Notation, the most popular text based and easy data interchange format from scratch.
Topics
Resources
Uh oh!
There was an error while loading.Please reload this page.