Understanding JSON (JavaScript Object Notation) in one article

JSON (JavaScript Object Notation, JS Object Notation) is a lightweight data exchange format, commonly used by servers to pass data to web pages . Like XML, JSON is a plain text-based data format.

The file suffix of a Json file is .Json , and the MIME type of the Json text is application/Json .

JSON appears

Before JSON came along, people used XML to transfer data. Because XML is a plain text format, it is suitable for exchanging data over the Internet. XML itself is not complicated, but with a bunch of complex specifications such as DTD, XSD, XPath, XSLT, etc., any normal software developer will feel overwhelmed when encountering XML. In the end, everyone finds that even if you study hard for several months, you may not be able to understand the XML specifications.

Finally, one day in 2002, Douglas Crockford invented JSON, an ultra-lightweight data exchange format, in order to save software engineers who were in dire straits and had been fooled by several giant software companies for a long time.

Because JSON is very simple, it quickly became popular in the Web world and became an ECMA standard. Almost all programming languages ​​have libraries for parsing JSON, and in JavaScript, we can use JSON directly because JavaScript has built-in JSON parsing.

Json structure

Json has two basic structures, namely Json object and Json array. Various complex structures can be represented by the combination of Json objects and Json arrays.

Json Object

The object structure starts with { It starts with } and ends with }. The middle part consists of 0 or more key/value pairs separated by English characters, and the key and value are separated by English characters : The grammatical structure of the object structure is as follows:

The key must be of String type and must be enclosed in double quotes. value can be a data type such as String, Number, Object, Array, etc. For example, a person object contains information such as name, password, age, etc., and the JSON representation is as follows

{
    "pname":"Zhang San",
    "password":"123456",
    "page":40
}

JSON objects are stored within curly braces.

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

Json object and JavaScript object

Everything in JavaScript is an object, such as strings, numbers, arrays, dates, etc. In JavaScript, an object is data that has properties and methods.

The Json object we usually refer to is a JavaScript object in Json format or a JavaScript object that conforms to the Json data structure requirements.

Convert JSON to JavaScript objects

Json array

The array structure starts with [ and ends with ] , and the middle part consists of a list of 0 or more values ​​separated by English characters , The syntax of the array structure is as follows:

The element types of a Json array can be inconsistent, for example, item1 can be a string type, item2 can be a number type, and item3 can be an object type. The last element of an array cannot be followed by a comma.

Complex array types

Here we create an array containing three objects.

The first is an HTML object, which is also an array containing 5 elements. The second is a JavaScript object that is also an array containing 4 elements. The third one is the Server object, which is also an array containing 3 elements.

Complex object array combination

The above two types of (object, array) data structures can also be combined to form more complex data structures.

Object contains array

Here we create a complex siteInfo object.

The value of the siteUrl property of the siteInfo object is www.haicoder.com, the value of the siteAddr property of the siteInfo object is shanghai, the value of the sitePriority property of the siteInfo object is 1, and the siteModule property of the siteInfo object is an array.

The siteModule array has two elements, the first element is HTML and the second element is JavaScript. Both elements are also of an array type.

Array contains objects

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 an employee record (first and last name).

JSON syntax rules

• The data is key/value pairs.
• The data is separated by commas.
• Curly brackets store objects and square brackets store arrays

To ensure uniform parsing, JSON strings must be enclosed in double quotes "" and Object keys must also be enclosed in double quotes "" .

Json key-value pairs

The writing format of Json data is: name/value pair. Just like JavaScript object properties. A name/value pair consists of the field name (enclosed in double quotes), followed by a colon, and then the value.

Data type of Json value

Json values ​​can be of the following types:

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.

Douglas has been a senior architect at Yahoo for a long time and naturally loves JavaScript. The Json he designed is actually a subset of JavaScript syntax and is a string representation of JavaScript objects. Json uses text to represent the information of a JavaScript object, which is essentially a string.

Json uses JavaScript syntax

Because Json uses JavaScript syntax, no additional software is required to process Json in JavaScript.

Here we create an object array through JavaScript and assign values ​​to the object array.

Access content

Modify data

Modify the category of the second element of the object:

modules[1].category = "ES6";

Json and JavaScript object traversal

Both Json string traversal and JavaScript object traversal use the for-in loop to traverse.

Json traversal

We create a haicoder.html file and enter the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Json traversal</title>
    <script type="text/javascript">
        console.log("haicoder.net (www.haicoder.net)");
        var str = {"name":"haicoder", "url":"www.haicoder.net"};
        for (var k in str) {
            console.log(k + " -> " + str[k]);
        }
    </script>
</head>
<body>
</body>
</html>

First, we defined a Json string str. Next, we use a for loop to traverse the Json string, k is the key in the Json string, and str[k] is the value corresponding to the Json string key.

Open the file with a browser, and the browser output is as shown below:

JavaScript Object Traversal

We create a haicoder.html file and enter the following code:

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Object Traversal</title>
    <script type="text/javascript">
        console.log("haicoder.net (www.haicoder.net)");
        var obj = {name:"haicoder", url:"www.haicoder.net"};
        for (var k in obj) {
            console.log(k + " -> " + obj[k]);
        }
    </script>
</head>
<body>
</body>
</html>

First, we define a JavaScript object obj. Next, we use a for loop to traverse the JavaScript object, k is the key of the JavaScript object, and obj[k] is the value corresponding to the JavaScript object key.

Json and JavaScript array traversal

Both Json array traversal and JavaScript array traversal use for-in loop to traverse

Json array traversal

We create a haicoder.html file and enter the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Json array traversal</title>
    <script type="text/javascript">
        console.log("haicoder.net (www.haicoder.net)");
        var jsonArr = [
            {"mod":"json", "url":"www.haicoder.net/json"},
            {"mod":"vue", "url":"www.haicoder.net/vue"},
            {"mod":"python", "url":"www.haicoder.net/python"}
        ]
        for (var k in jsonArr) {
            console.log(k + " -> " + jsonArr[k].mod + " -> " + jsonArr[k].url);
        }
    </script>
</head>
<body>
</body>
</html>

First, we define a Json array, each element in the array is an object. Next, we use a for loop to traverse the Json array, k is the subscript of the Json array, and jsonArr[k] is the value corresponding to the Json array subscript key.

We use . to get the value of each object in the Json array.

JavaScript Object Array Traversal

var Js_Result = [
  {
    name: "haicoder",
    url: "www.haicoder.net",
    age: 20
  },
  {
    name: "JavaScript",
    url: "www.JavaScript.net",
    age: 30
  }
]
for (var i in Js_Result ){ // i is the array subscript console.log(i+" "+Js_Result[i].firstName
 +" "+Js_Result[i].lastName
 +" "+Js_Result[i].age);
}
//The result output is 0 haicoder www.haicoder.net 20
1 JavaScript www.JavaScript.net 30

Save the JavaScript object to the array Js_Result. Use a for loop to traverse Json_Result, where i is the array index and obtain the corresponding value through Js_Result[i].firstName.

Serialization

Converting any JavaScript object to JSON means serializing the object into a string in JSON format so that it can be transmitted to other computers over the network.

Let's first serialize the Xiaoming object into a JSON string:

To make the output look better, you can add parameters and output according to indentation:

JSON.stringify(xiaoming, null, ' ');

result:

{
"name": "Xiaoming",
"age": 14,
"gender": true,
"height": 1.65,
"grade": null,
"middle-school": "\"W3C\" Middle School",
"skills": [
"JavaScript",
"Java",
"Python",
"Lisp"
]
}

You can also pass in a function so that each key-value pair of the object will be processed by the function first:

function convert(key, value) {
    if (typeof value === 'string') {
        return value.toUpperCase();
    }
    return value;
}

JSON.stringify(xiaoming, convert, ' ');

The above code converts all attribute values ​​to uppercase:

{
  "name": "Xiaoming",
  "age": 14,
  "gender": true,
  "height": 1.65,
  "grade": null,
  "middle-school": "\"W3C\" MIDDLE SCHOOL",
  "skills": [
    "JAVASCRIPT",
    "JAVA",
    "PYTHON",
    "LISP"
  ]
}

If we also want to precisely control how to serialize Xiaoming, we can define a toJSON() method for xiaoming to directly return the data that JSON should serialize:

var xiaoming = {
    name: 'Xiaoming',
    age: 14,
    gender: true,
    height: 1.65,
    grade: null,
    'middle-school': '\"W3C\" Middle School',
    skills: ['JavaScript', 'Java', 'Python', 'Lisp'],
    toJSON: function () {
        return { // Output only name and age, and change the key:
            'Name': this.name,
            'Age': this.age
        };
    }
};

JSON.stringify(xiaoming); // '{"Name":"Xiaoming","Age":14}'

Deserialization

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

After getting a string in JSON format, we directly use JSON.parse() to turn it into a JavaScript object:

JSON.parse('[1,2,3,true]'); // [1, 2, 3, true]
JSON.parse('{"name":"Xiao Ming","age":14}'); // Object {name: 'Xiao Ming', age: 14}
JSON.parse('true'); // true
JSON.parse('123.45'); // 123.45

JSON.parse() can also accept a function to transform the parsed attributes:

Features of Json

1. Json is easy to parse and generate by machines, and client-side JavaScript can simply read Json data through eval().
2. Json is inherently self-describing and easy for humans to read and write.
3. Json uses a text format that is completely language independent. The formats are all compressed and occupy little bandwidth.
4. Json parsers and Json libraries support many different programming languages, and currently almost all programming languages ​​support Json.
5. Because the Json format can be used directly by the server-side code, it greatly simplifies the code development on the server and client sides, but the tasks completed remain unchanged and are easy to maintain.
6. Json is smaller, faster, and easier to parse than XML.
7. Json also stipulates that the character set must be UTF-8, so there is no problem in representing multiple languages.

This is the end of this article about understanding JSON (JavaScript Object Notation) in one article. For more relevant JSON (JavaScript Object Notation) content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!