JSON object

May 08, 2021 JSON

1. JSON object

2. Create simple objects

3. Access the object value

4. Loop object

5. Create an array object

6.. Nested JSON objects

11.. The difference between a JSON object and a string

JSON object

A simple JSON object syntax:

{ "name":"w3cschool", "alexa":8000, "site":null }

JSON objects are written in braces, and objects can contain multiple key/value (key/value) pairs.

Among them:

Key must be a string, value can be a legitimate JSON data type (string, number, object, array, boolean value or null).
Key and value use colons (:) splits.
Each key/value pair is split with a comma (,).

Create simple objects

JSON objects can be created using JavaScript. Let's look at the various ways to create JSON objects using JavaScript:

Create an empty object:

var JSONObj = {};

Create a new object:

var JSONObj = new Object();

Create an object with a bookname property value of a string and a price property value of a number. Properties can be accessed by using the '.' operator.

var JSONObj = { "bookname ":"VB BLACK BOOK", "price":500 };

Here's an example of creating an object with JSON in JavaScript, and you can save the following code as json_object_w3cschool.htm:

<html>
<head>
<title>在JavaScript中使用JSON创建对象（w3cschool.cn）</title>
<script language="javascript" >

    var JSONObj = { "name" : "编程狮（w3cschool.cn）", "time"  : 2020 };
    document.write("<h1>JSON和JavaScript的例子</h1>");
    document.write("<h3>网站的名字="+JSONObj.name+"</h3>");  
    document.write("<h3>时间="+JSONObj.time+"</h3>");  

</script>
</head>
<body>
</body>
</html>

Now let's try opening this page using IE or any other JavaScript-enabled browser, which will produce the following results:

JSON object

Access the object value

You can use the dot number (.) to access the value of the object:

var myObj, x;
myObj = { "name":"w3cschool", "alexa":8000, "site":null };
x = myObj.name;

Try it out . . .

You can also use parentheses to access the value of an object:

var myObj, x;
myObj = { "name":"w3cschool", "alexa":8000, "site":null };
x = myObj["name"];

Try it out . . .

Loop object

You can use for-in to loop the properties of an object:

var myObj = { "name":"w3cschool", "alexa":8000, "site":null };
for (x in myObj) {
document.getElementById("demo").innerHTML += x + "
";
}

Try it out . . .

When you loop an object's property for-in, use parentheses to access the value of the property:

var myObj = { "name":"w3cschool", "alexa":8000, "site":null };
for (x in myObj) {
document.getElementById("demo").innerHTML += myObj[x] + "
";
}

Try it out . . .

Create an array object

The following example shows an array object created with JSON in JavaScript, and you can save the following code as json_array_object_w3cschool.htm:

<html>
<head>
<title>在 JavaScript 中使用 JSON 创建数组对象(w3cschool.cn)</title>
<script language="javascript" >

document.writeln("<h2>JSON数组对象(w3cschool.cn)</h2>");

var books = {
    "Pascal" : [ 
        { "Name"  : "Pascal Made Simple", "price" : 700 },
        { "Name"  : "Guide to Pascal", "price" : 400 }
    ],                       
    "Scala"  : [
        { "Name"  : "Scala for the Impatient", "price" : 1000 }, 
        { "Name"  : "Scala in Depth", "price" : 1300 }
    ]    
}    

var i = 0
document.writeln("<table border='2'><tr>");
for(i=0;i<books.Pascal.length;i++)
{   
    document.writeln("<td>");
    document.writeln("<table border='1' width=100 >");
    document.writeln("<tr><td><b>Name</b></td><td width=50>"
    + books.Pascal[i].Name+"</td></tr>");
    document.writeln("<tr><td><b>Price</b></td><td width=50>"
    + books.Pascal[i].price +"</td></tr>");
    document.writeln("</table>");
    document.writeln("</td>");
}

for(i=0;i<books.Scala.length;i++)
{
    document.writeln("<td>");
    document.writeln("<table border='1' width=100 >");
    document.writeln("<tr><td><b>Name</b></td><td width=50>"
    + books.Scala[i].Name+"</td></tr>");
    document.writeln("<tr><td><b>Price</b></td><td width=50>"
    + books.Scala[i].price+"</td></tr>");
    document.writeln("</table>");
    document.writeln("</td>");
}
document.writeln("</tr></table>");
</script>
</head>
<body>
</body>
</html>

Now let's try opening this page using IE or any other JavaScript-enabled browser, and it will produce results like this:

JSON object

Nested JSON objects

The JSON object can contain another JSON object:

myObj = {
    "name":"w3cschool",
    "alexa":10000,
    "sites": {
        "site1":"www.w3cschool.cn",
        "site2":"m.w3cschool.cn",
        "site3":"c.w3cschool.cn"
    }
}

You can use the dot number (.) Or parentheses to access nested JSON objects.

x = myObj.sites.site1;
// or
x = myObj.sites["site1"];

Try it out . . .

Modify the value

You can use the dot number (.) to modify the value of the JSON object:

myObj.sites.site1 = "www.w3cschool.cn";

Try it out . . .

You can modify the value of the JSON object using parentheses:

myObj.sites["site1"] = "www.w3cschool.cn";

Try it out . . .

The difference between a JSON object and a string

The difference between a JSON object and a JSON string:

JSON object

var str2 = { "name": "asan", "sex": "man" };

JSON string

var str1 = '{ "name": "deyuyi", "sex": "man" }';

JSON object

Table of contents

JSON object

Create simple objects

Access the object value

Loop object

Create an array object

Nested JSON objects

Modify the value

The difference between a JSON object and a string

Cookie Consent