JS Learning Notes 9_JSON

##1. JSON Overview

JavaScript Object Notation, JS object representation, (like XML) is a data format, it has the same syntax form as JS

P.S. A bit of history: JSON's father is Douglas, author of "JavaScript: The Good Parts", the inspiration for creating JSON came from JS's literal notation

##2. JSON Syntax

###1. Representing Simple Values

For example 3, "str", null, false, etc., does not support undefined, and strings must use double quotes (JSON doesn't have the single quote string notation like JS)

###2. Representing Objects

Similar to JS object literals, but

• No variable declaration

• No trailing semicolon

• Property names must be wrapped in double quotes (easy to mistakenly write single quotes or forget quotes)

For example:

{
  "name" : "ayqy",
  "sex" : "M",
  "nextSibling" : {
    "name" : "xxx",
    "sex" : "M",
    "nextSibling" : null
  }
}

###3. Representing Arrays

Similar to array literals, but

• No variable declaration

• No trailing semicolon

For example:

[3, 6, false, "ayqy", {"name" : "xxx", "age" : 18}]

###4. Complex Data Structures

Arrays and objects can create more complex data structures through nesting, for example:

[
  1, 
  {
    "extra" : [
      6,
      {
        "id" : 5,
        "attr" : "value"
      },
      false
    ],
    "index" : 1001
  },
  2
]

##3. Serialization (JS Object to JSON)

[IE8+] and other mainstream browsers have built-in JSON objects, can call native methods to serialize JS objects:

JSON.stringify(obj);//Serialize according to default rules, properties with undefined values and function values will be ignored
JSON.stringify(obj, arr/fun(key, value));//Support filtering some properties (only keep properties listed in arr or filter with fun)
JSON.stringify(obj, null, num/strPrefix);//Support formatting, automatically wrap and indent num spaces per level or add a prefix string per level

For [IE7-] support, we'll discuss later

##4. Parsing (JSON to JS Object)

JSON.parse(str);//Direct parsing
JSON.parse(str, fun(key, value));//Parse with fun

For [IE7-] support, we'll discuss later

##5. Cross-Browser JSON Serialization/Parsing

For browsers that don't support JSON objects, you can use a shim (a small terminology):

Download link: https://github.com/douglascrockford/JSON-js/ (made by Douglas himself)

Simply put, it's a small JS library (only 4KB after compression), providing JSON parsing and serialization functions. Of course, you can also use JQuery directly

Douglas also provided additional JSON support (besides basic stringify and parse):

json2.js: If the built-in JSON object doesn't exist, it adds a JSON property to the global object, the property value is an object with stringify and parse methods. parse uses the eval method for parsing, also uses several regular expression checks to prevent executing non-JSON code. In modern browsers this JS file does nothing, native support takes priority. If you don't need to support [IE8-], don't use this, meaning this file is not necessary.

json.js: This file contains all functionality of json2.js, also adds toJSONString and parseJSON methods to Object's prototype, not recommended to use.

json_parse.js: This file provides another implementation of the parse function: uses recursive descent (P.S. grammar parser... well, Douglas is quite powerful) instead of the eval function

json_parse_state.js: This file provides another implementation of the parse function: uses state machine (P.S....) instead of the eval function

cycle.js: This file has two functions: JSON.decycle and JSON.retrocycle, used to eliminate/restore cycles and graph structures in JSON, JSONPath is used to represent data relationships

P.S. Above is a simple translation of the readme file

Reference Materials:

• How PHP parses JSON data: Senior's Blog

• JSON official information: http://www.JSON.org/