JSON Objects

Next ❯Arrays

Json itself is in the form of an object

  • In JSON, object can store only valid JSON data types as value (string, number, array, object, boolean or null)
  • turned_in_notObjects can be divided in two ways
    • Simple Object
    • Nested Object


Simple Object
{ "key1":value1, "key2":value2,...., "keyN":valueN }

Example

{ "name":"Riya", "age":23 }

/*To access the object single/direct value*/


Riya

*using dot (.)

Syntax: obj.keyName

var obj = {"name":"Riya","age":23};
$("p").html(obj.name);
Get Valuesubject
Get Valueclose
<!DOCTYPE html>
<html>
<head>
<title>Full Code</title>
<!--Required jQuery Library file-->
<script src="jquery.min.js"></script>
</head>
<body>
<p style="text-align:center;"></p>
<script>
var obj = { "name":"Riya", "age":23 };
$("p").html(obj.name);
</script>
</body>
</html>

Riya

*using bracket ([ ])

Syntax: obj["keyName"]

var obj = {"name":"Riya","age":23};
$("p").html(obj["name"]);
Get Valuesubject
Get Valueclose
<!DOCTYPE html>
<html>
<head>
<title>Full Code</title>
<!--Required jQuery Library file-->
<script src="jquery.min.js"></script>
</head>
<body>
<p style="text-align:center;"></p>
<script>
var obj = { "name":"Riya", "age":23 };
$("p").html(obj["name"]);
</script>
</body>
</html>

/*To access the object all Keys & values*/


Key:name, Value:Riya
Key:age, Value:23

var obj = {"name":"Riya","age":23};
for(var key in obj){
  $("p").append("Key:"+key+", Value:"+obj[key]+"<br>");
}
Get Key & Valuesubject
Get Key & Valueclose
<!DOCTYPE html>
<html>
<head>
<title>Full Code</title>
<!--Required jQuery Library file-->
<script src="jquery.min.js"></script>
</head>
<body>
<p style="text-align:center;"></p>
<script>
var obj = {"name":"Riya","age":23};
for(var key in obj){
  $("p").append("Key:"+key+", Value:"+obj[key]+"<br>");
}
</script>
</body>
</html>

/*Syntax-To change the object value*/

obj.keyName=newValue;
OR
obj["keyName"]=newValue;

Before : Riya
After Changing : Rahul

var obj = {"name":"Riya","age":23};
$("p").html("Before : "+ obj.name);
obj.name="Rahul";
$("p").append("<br>After Changing : "+ obj.name);
Change Valuesubject
Change Valueclose
<!DOCTYPE html>
<html>
<head>
<title>Full Code</title>
<!--Required jQuery Library file-->
<script src="jquery.min.js"></script>
</head>
<body>
<p style="text-align:center;"></p>
<script>
var obj = { "name":"Riya", "age":23 };
$("p").html("Before : "+ obj.name);
obj.name="Rahul";
$("p").append("<br>After Changing : "+ obj.name);
</script>
</body>
</html>

/*Syntax-To delete the object value*/

delete obj.keyName;
OR
delete obj["keyName"];

Before : Riya
After deleting : undefined

var obj = {"name":"Riya","age":23};
$("p").html("Before : "+ obj["name"]);
delete obj["name"];
$("p").append("<br>After deleting : "+ obj["name"]);
Delete Valuesubject
Delete Valueclose
<!DOCTYPE html>
<html>
<head>
<title>Full Code</title>
<!--Required jQuery Library file-->
<script src="jquery.min.js"></script>
</head>
<body>
<p style="text-align:center;"></p>
<script>
var obj = { "name":"Riya", "age":23 };
$("p").html("Before : "+ obj["name"]);
delete obj["name"];
$("p").append("<br>After deleting : "+ obj["name"]);
</script>
</body>
</html>


Nested Object

Object inside object

Example

{ 
 "phone":{ "modal":"iphone X", "color":"black", "price":"$999" },
 "brand":"apple"
}

Here, above keyName "phone" is having another object , you can refer it (phone) as a keyObject for better understanding


/*Syntax-To access nested object single key*/

obj.keyObject.keyName;
OR
obj.keyObject["keyName"];

Your phone modal is : iphone X
and color is : black

var obj = {
  "phone":{ "modal":"iphone X", "color":"black", "price":"$999" },
  "brand":"apple"
};
$("p").html("Your phone modal is : "+ obj.phone["modal"]+
    "<br> and color is : "+ obj.phone.color);
Nested Objectsubject
Nested Objectclose
<!DOCTYPE html>
<html>
<head>
<title>Full Code</title>
<!--Required jQuery Library file-->
<script src="jquery.min.js"></script>
</head>
<body>
<p style="text-align:center;"></p>
<script>
var obj = { "phone":{ 
  "modal":"iphone X", "color":"black", "price":"$999" },
  "brand":"apple"
  };
$("p").html("Your phone modal is : "+ obj.phone["modal"]+
  "<br> and color is : "+ obj.phone.color);
</script>
</body>
</html>

To access more inside nested objects

/*Syntax-In general way*/

obj.keyObject.nextKeyObject1.nextKeyObject2....nextKeyObjectN.keyName;
OR
obj.keyObject.nextKeyObject1.nextKeyObject2....nextKeyObjectN["keyName"];

To change nested object value

/*Syntax-In general way*/

obj.keyObject.nextKeyObject1.nextKeyObject2....nextKeyObjectN.keyName= newValue;
OR
obj.keyObject.nextKeyObject1.nextKeyObject2....nextKeyObjectN["keyName"]= newValue;

To delete nested object value

/*Syntax-In general way*/

delete obj.keyObject.nextKeyObject1.nextKeyObject2....nextKeyObjectN.keyName;
OR
delete obj.keyObject.nextKeyObject1.nextKeyObject2....nextKeyObjectN["keyName"];

  • Arrays
❮ Prev JSON Parse
Next ❯Arrays
TryOut Examples"Learn to Explore..!"

TryOut Editor

receipt
❯