Jquery And JavaScript

Updated : May 03, 2020 in Asp.Net MVC

What Is JSON, Everything about JSON

In this article, we will learn what is JSON 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);

Latest posts by DuttaluruVijayakumar (see all)
Like
Like Love Haha Wow Sad Angry
161

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x