What is JSON

JSON (JavaScript Object Notation) is a lightweight data interchange format. It is easy for humans to read and write. It is also easy for machines to parse and generate. It is based on a subset of the JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999. JSON is a text format that is completely language independent but uses conventions that are familiar to programmers of the C-family of languages (including C, C++, C#, Java, JavaScript, Perl, Python, etc.). These properties make JSON an ideal data interchange language. JSON is based on two structures: JSON1 has two structures2

Simply put, JSON is objects and arrays in JavaScript, so these two structures are object and array structures, through which various complex structures can be represented.

Objects: Objects in JavaScript are represented as content enclosed in curly braces "{}". The data structure is {key: value, key: value, ...} in the form of key-value pairs. In object-oriented languages, the key is the property of the object, and the value is the corresponding property value. So it's easy to understand that the method to get the value is object.key to get the property value. The type of this property value can be number, string, array, or object.
Arrays: Arrays in JavaScript are content enclosed in square brackets "". The data structure is "java", "javascript", "vb", .... The method to get values is the same as in all languages, using indexes. The field value types can be number, string, array, or object.

{
    "animals": {
        "dog": [
            {
                "name": "Rufus",
                "age":15
            },
            {
                "name": "Marty",
                "age": null
            }
        ]
}

Complex data structures can be formed through the combination of objects and arrays.

A collection of name/value pairs. In different programming languages, it is understood as an object, record, struct, dictionary, hash table, keyed list, or associative array. An ordered list of values. In most languages, it is implemented as an array, vector, list, or sequence.

These are all common data structures. Currently, most programming languages support them in some form. This makes it possible to exchange data in the same format between various programming languages.

JSON has the following forms: An object is an unordered set of name/value pairs. An object begins with a left brace ("{") and ends with a right brace ("}"). Each name is followed by a colon (":"), and the name/value pairs are separated by commas (","). An array is an ordered collection of values. An array begins with a left bracket ("") and ends with a right bracket (""). Values are separated by commas (","). A value can be a string in double quotes, a number, true, false, null, an object, or an array. These structures can be nested. A string is a collection of zero or more Unicode characters, wrapped in double quotes, using backslash escapes. A character is represented as a single character string. JSON strings are very similar to C or Java strings. A number is also very similar to a C or Java number. However, JSON numbers do not use octal or hexadecimal formats. At the same time, whitespace can be added between any tokens.

Accessing Data

Although it may not be obvious, the long string above is actually just an array; after putting this array into a JavaScript variable, you can easily access it. In fact, you only need to use dot notation to represent array elements. So, to access the last name of the first entry in the programmers list, you would use code like this in JavaScript:

people.programmers0.lastName; Note that array indices start at zero. So, this line of code first accesses the data in the people variable; then moves to the entry called programmers, then to the first record (0); finally, it accesses the value of the lastName key. The result is the string value "McLaughlin". Here are some examples using the same variable.

people.authors1.genre // Value is "fantasy" people.musicians3.lastName // Undefined. This refers to the fourth entry, and there isn't one people.programmers2.firstName // Value is "Elliotte"

Using this syntax, you can handle any JSON-formatted data without needing any additional JavaScript toolkits or APIs.

Comparison with XML

Readability

The readability of JSON and XML is comparable. One has a simple syntax, the other has a standardized tag form, making it difficult to determine a winner.

Extensibility

XML naturally has good extensibility, and JSON certainly does too. There is nothing that XML can extend that JSON cannot. However, JSON has an incomparable advantage when working in JavaScript, as it can store JavaScript composite objects.

Encoding Difficulty

XML has rich encoding tools, such as Dom4j, JDom, etc., and JSON also provides tools. Without tools, skilled developers can quickly write the desired XML documents and JSON strings, but XML documents require many more structural characters.

Decoding Difficulty

There are two ways to parse XML: One is through the document model, which is to index a set of tags through the parent tag. For example: xmlData.getElementsByTagName("tagName"), but this is used when the document structure is known in advance and cannot be encapsulated for general use. Another method is to traverse nodes (document and childNodes). This can be implemented through recursion, but the parsed data is still in various forms and often cannot meet the requirements in advance.

Parsing such extensible structured data is always difficult.

The same is true for JSON. If you know the JSON structure in advance, using JSON for data transfer is wonderful, and you can write very practical, beautiful, and readable code. If you are a pure front-end developer, you will definitely love JSON. But if you are an application developer, you may not like it as much, after all, XML is the real structured markup language used for data transfer.

If you parse JSON without knowing its structure, it is absolutely a nightmare. It's time-consuming and labor-intensive, the code becomes redundant and dragging, and the results are not satisfactory. But this doesn't affect many front-end developers from choosing JSON. Because toJSONString() in json.js allows you to see the string structure of JSON. Of course, not using this string, it's still a nightmare. People who frequently use JSON understand the structure of JSON after seeing this string, making it easier to operate JSON.

The above is about parsing XML and JSON for data transfer in JavaScript. In JavaScript's territory, JSON is playing on its home field, and its advantages are far superior to XML. If JSON stores JavaScript composite objects and you don't know its structure, I believe many programmers would also cry while parsing JSON.

In addition to the above, JSON and XML have another big difference in terms of effective data rate. JSON has higher efficiency as a data packet format for transmission because JSON doesn't require strict closing tags like XML, which greatly increases the ratio of effective data to the total data packet, thereby reducing network transmission pressure under the same data flow.

JSON Formatting

JSON Formatting refers to converting JSON strings into a format that is easy to read and understand, mainly including the following aspects:

1. Purpose of Formatting

Improve readability: Make JSON structure clearer through appropriate indentation and line breaks
Facilitate debugging: Formatted data makes it easier to find errors in the data structure
Convenient editing: Structured display facilitates modification and maintenance

2. Formatting Rules

Use indentation to represent hierarchical relationships
Each key-value pair occupies a separate line
Add spaces after colons
Use line breaks to separate elements
Keep brackets aligned

3. Formatting Example

Unformatted JSON:

{"name":"张三","age":25,"skills":["JavaScript","Python"],"address":{"city":"北京","street":"朝阳区"}}

Online format: JSON Formatting

在线JSON美化/格式化