JavaScript JSON

JSON is a format used to store and transmit data.

JSON is usually used by the server to transfer data to the web page.

What is JSON?

##The full English name of JSON is JavaScript Object Notation
JSON is a lightweight data exchange format.
JSON is an independent language *
JSON is easy to understand.

Tip: JSON uses JavaScript syntax, but the JSON format is just text. Text can be read by any programming language and passed as a data format.

The following JSON syntax defines the employees object: Array of 3 employee records (objects):

{"employees":[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter ", "lastName":"Jones"}
]}

JSON is formatted as a JavaScript object

The JSON format is syntactically identical to the code that creates JavaScript objects.

Because they are similar, JavaScript programs can easily convert JSON data into JavaScript objects.

#JSON syntax rules

The data is key/value pairs.
Data is separated by commas.
Braces save the object
Square brackets save the array

JSON data - one name corresponds to one value

JSON data format is key/value pairs, just like JavaScript object properties.

A key/value pair consists of the field name (in double quotes), followed by a colon, and then the value:

"firstName":"John"

JSON Object

JSON object is stored within curly brackets.

Just like in JavaScript, objects can hold multiple key/value pairs:

{"firstName":"John", "lastName":"Doe"}

JSON array

JSON array is stored in square brackets.

Just like in JavaScript, arrays can contain objects:

"employees":[
{"firstName":"John", "lastName":"Doe" },
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]

In the above example, the object "employees" is an array. Contains three objects.

Each object is a record of an employee (last name and first name).

Convert JSON string to JavaScript object

Usually we read JSON data from the server and display the data in the web page .

For the sake of simplicity, we set the JSON string directly in our web page

First, create a JavaScript string. The string is data in JSON format:

var text = '{ "employees" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName" :"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';

Then, use the JavaScript built-in function JSON. parse() converts a string into a JavaScript object:

var obj = JSON.parse(text);

Finally, use the new JavaScript object in your page:

Example

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
</head>
<body>
<h2>为 JSON 字符串创建对象</h2>
<p id="demo"></p>
<script>
    var text = '{"employees":[' +
            '{"firstName":"John","lastName":"Doe" },' +
            '{"firstName":"Anna","lastName":"Smith" },' +
            '{"firstName":"Peter","lastName":"Jones" }]}';
    obj = JSON.parse(text);
    document.getElementById("demo").innerHTML =
            obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>
</body>
</html>

Run the program to try it

Related functions

Function	Description
JSON.parse()	Used to convert a JSON string into a JavaScript object.
JSON.stringify()	is used to convert JavaScript values to JSON strings.

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <h2>为 JSON 字符串创建对象</h2> <p id="demo"></p> <script> var text = '{"employees":[' + '{"firstName":"John","lastName":"Doe" },' + '{"firstName":"Anna","lastName":"Smith" },' + '{"firstName":"Peter","lastName":"Jones" }]}'; obj = JSON.parse(text); document.getElementById("demo").innerHTML = obj.employees[1].firstName + " " + obj.employees[1].lastName; </script> </body> </html>

submit Reset Code

Automatic operation

JavaScript JSON

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]