In this article, we will learn what is JSON object how we will use in the application what are the data types in JSON, how to convert the Arrays to JSON.
Introduction about JSON
JSON (JavaScript Object Notation) is a text-based and lightweight open standard designed data for interchange. The JSON was specified by Douglas Crockford.
The filename extension of JSON is (.json). The MIME type for JSON text is “application/json“
Uses of JSON in Applications
- The JSON format is used in, different Types of Web Applications, Web services, and APIs.
- JSON can be used with different types of programming languages such as c#, .net, Ruby, Java, PERL,etc.
- It is used to transmit the data between web applications and a server.
- JSON is used in javascript and it is a lightweight text-based format.
- It is also used for serializing and transmitting.
- JSON objects we will easily serialize and Deserializing.
JSON and XML difference
JSON and XML can be used to receive data from a web server.basically web server it will return JSON ,XML Format.
Example for JSON: see the given below Json Example
{
"Product": Iphone,
"name": "6s",
"price": 80000
}
Example for XML:see the given below XML Example
<Phone>
<company>Apple</company>
<name>6s</name>
<price>80000</price>
</phone>
Jason is better than XML Because JSON is easy to parse and easy to use in javascript.
Syntax for JSON
- It uses name/value pair, Square brackets hold arrays object, Commas are used for data separation In JSON Object.
Example:
{ "product":"iphone", "price":80000, "name":"6s" };
JSON Data Types:
- Number
- String
- Boolean
- Array
- Object
- null
Number: Number must be a integer or a floating point.
{ "price":80000 }
String: String must be in double quotes.
{ "name":"6S" }
Booleans: Booleans can be false or true.
{ "Active":false }
Arrays: JSON values can be arrays.
{
"Users":[ "vijay", "jock", "supraja" ]
}
Objects: JSON values can be objects.
{
"employee":{ "name":"Ajay", "age":40 }
}
Null: JSON values can be null.
{ "name":null }
JSON Objects SynTax:
{ "name":"Ajay", "age":45, "Status":null }
How to Access the Object Values
Approach 1: Using (.) symbol
JSON Object values can be accessed by using dot (.) symbol see the following given example :
object = { "name":"Ajay", "age":45, "status":null };
y= obj.name;
Approach 2: Using ([]) symbol
object = { "name":"Ajay", "age":45, "status":null };
y= obj.["name"];
How to Looping a JSON Object
Approach 11: Using For-loop
we can use the for-loop to get all values from object one by one sees the given below example:
object = { "name":"Ajay", "age":45, "Status":null };
for (var items in object) {
document.getElementById("sample").innerHTML += items;
}
Approach 2: using for-in loop with bracket []
we can use the bracket [] to get all values from object one by one sees the given below example:
object = { "name":"Ajay", "age":45, "Status":null };
for (var items in object) {
document.getElementById("sample").innerHTML += obj[vals];
}
How to retrieve Nested JSON Objects values
object = {
"name":"Ajay",
"age":45,
"loans": {
"Loan1":"car",
"Loan2":"House"
},
"location":"India"
}
Approach1: using the (.) symbol, the given example we will return the “car” from JSON object “items”
Items= obj.loans.loan1;
Approach 2: using bracket [] symbol, the given example we will return the “House” from JSON object “items”
Items= obj.loans["loan2"];
How to Modify Values in a JSON object
Approach 1: using the (.) symbol, you can see the following given example for modifying the values in JSON Object
Items.loans.loan1= "arealoan";
Above line code change the value of “House” to “arealoan” in JSON object “Items”.
Approach 2: using the bracket [] symbol, you can the following given example for modifying the values in JSON Object using brackets [].
Items.loans["loan2"] = "arealoan";
Above the line, code change the value of “loan2” to “arealoan” in JSON object “Items” using the bracket [] symbol.
How to Delete Object Properties in JSON Object
delete object.lonas.loan1;
Above code delete the value of “loan1” in JSON object “Items” using.
Handling the JSON Arrays
JSON Arrays are similar to look like JavaScript arrays. see the given below example
[ "Suzuki", "Honda" ]
Example:
{
"name":"Ajay,
"age":45,
"loans":[ "loan1", "loan2" ]
}
Accessing Array Values from Array object in Json
You can access the values of an array by using index number, by default values position start from 0. the given below code gets the value “loan1” from the object “object”.
y= Object.loans[0];
Looping through Array object in Json
Approach 1: using For-Loop, You can access the values of an array by using a for-loop.
for (i in object.loans) {
values+= object.loans[i];
}
Approach 2 : Using For You can access the values of an array
the given Example object.loans.length is used to get array length and object.loans[i] is used to get array values “loan1”, “loan2”.
for (i = 0; i < object.loans.length; i++) {
values+= object.loans[i];
}
Nested Arrays Example in JSON
a nested array is nothing but array inside another array JSON allows adding another array in array values.
object= {
"name":"Ajay",
"age":65,
"fruits": [
{ "name":"Apple", "models":[ "garde1", "grade2" ] },
{ "name":"Mango", "models":[ "grade1", "grade2" ] },
{ "name":"grape", "models":[ "grade1", "grade2" ] },
]
}
see the given below example Accessing array value using for-loop
for (i in object.fruits) {
y+= "<h1>" + object.fruits[i].name + "</h1>";
for (j in object.fruits[i].models) {
y+= object.fruits[i].models[j];
}
}
Modify Array Values inside Json Object
By using Index number we will change allow to modify an array. the given below code change the value “house” to “arealoan”.
object= {
"name":"Ajay",
"age":55,
"loans":["car", "house"]
};
object.loans[1] = "arealoan";
Delete Array Items
By using the “delete” keyword we will allow deleting items from an array. the given below code delete the value “house”.
delete object.loans[1];
What is JSON Parse and Stringify?
JSON.parse(): this function allows to parse the data, and data becomes a JavaScript object
'{ "name":"Ajay", "age":55, "loan":"Car"}'
see the given below received above text from a server conversion using JSON,.parse(). this function allows converting text into a JavaScript object.
var object= JSON.parse('{ "name":"Ajay", "age":55, "loan":"car"}');
JSON.stringify(): This function allow to convert a JavaScript object into a string.
var object= { "name":"Ajay", "age":55, "loan":"car"};
see the given below received above object in JavaScript.
var jsonobject = JSON.stringify(object);
you will see Dynamic table from JSON object with filters using javascript
I like to share my work experience, research, and knowledge through my blog.
I love developing the applications in Microsoft technologies including asp.net mvc,c#.net, windfarms, SQL server,entityfrawork,Ajax,Jquery,WEbApi,Asp.net core, SEO, WordPress, UI..more
- dtoptions in angular10 datatable - April 29, 2021
- Angular 11 Crud Operation - April 14, 2021
- How to create dynamic form fields using jQuery - January 4, 2021