1. What is JSON?

  • JSON stands for JavaScript Object Notation
  • JSON is a lightweight text data interchange format
  • JSON language Independent: JSON uses Javascript syntax to describe data objects, but JSON remains language and platform independent. JSON parsers and JSON libraries support many different programming languages. JSON is currently supported by many dynamic (PHP, JSP,.NET) programming languages.
  • JSON is self-descriptive and easy to understand

2. What are the syntax rules of JSON?

  • JSON syntax is a subset of JavaScript object representation syntax.

  • The data is in the name/value pair

  • Data is separated by commas

  • Curly braces {} hold the object

  • Brackets [] hold arrays, which can contain multiple objects

    { “name”: “xdr630”, “favorite”: “programming” }

3. The JSON and XML

JSON is often compared to XML because JSON was more or less conceived to replace XML. JSON has the following advantages over XML:

  • No closing tag, shorter length, faster reading and writing
  • Can be parsed directly by the JavaScript interpreter
  • You can use arrays

Both are

  • JSON:

    {” name “:” xi moving “, “age” : 22, “fruits” : [” apple “, “pear”, “grape”]}

  • XML:

    What’s apple and grape

4. JSON parsing and generation (JSON and JS objects interchange)

  • In JavaScript, there are two methods associated with this:JSON.parseandJSON.stringify 。

    JSON and JS objects interrotate

  1. To convert from a JSON string to a JS object, use the json.parse () method:

To convert from a JS object to a JSON string, use the json.stringify () method:

<script> var STR = '{"name": "xi xi ","age":22}'; var obj = JSON.parse(str); console.log(obj); var jsonstr = JSON.stringify(obj); console.log(jsonstr); </script>Copy the code

5. The JSON format is specified

5.1 objects (0bject)

Objects are enclosed in braces (” {} “) that contain a series of name/value pairs, as shown in the concept diagram.

Use commas (“, “) to separate two parallel data points. Note two points:

Use English commas (,), not Chinese commas (,).

Do not put a comma after the last name/value pair

5.2. Array

  • An array represents an ordered series of values, using square brackets (“[]“), used between parallel valuesThe commaSee the concept diagram for separation.

For example, the following array is valid:

[1, 2, "three", "four", true, false, null, [1, 2], {" name ":" xi moving "}]Copy the code

5.3 Name/Value Pair (Name/Value)

  • Unlike JavaScript, a Name is a string and is enclosed in double quotes, not single or no quotes.
  • There are only seven types of values:String, number, object, array, true, false, and NULL.You can’t have any other types, such as uNdefined, functions,And so on. Look at the concept diagram.

The rules for strings are as follows:

  1. Use double quotation marks, not single quotation marks, but not without.
  2. Double quotation marks cannot stand alone in a string.") and the right slash (“\“).
  3. To use double quotes or a right slash, use”Right slash + character“, for example\"and\ \And so do other escape characters. Concept diagram of strings.

6. String to object

  • Parsing: Refers to the process of converting strings that conform to JSON syntax rules into objects.
  • Different programming languages provide methods for parsing JSON strings, and I’ll focus on parsing in JavaScript here. There are three main types:
  1. useeval()
  2. useJSON.parse()
  3. Use a third-party library, such as JQuery

6.1, the eval ()

  • The eval ()The function takes a string to execute the JavaScript code directly.

Example: Eval () parses a string

<script>
  var str = "console.log('hello')";
  eval(str);
</script>
Copy the code
  • Eval parses a string as a result:

  • Eval () can parse JSON strings. As you can see from this, JSON and JavaScript are highly chimeric.

  • Example: Eval () parses a JSON string

  • However, it’s rare to use eval() directly for parsing these days, and if your browser version is really old, you might need this method. In addition, eval() is a relatively dangerous function because strings can contain unknowns. Here, again, as learning, it’s important to know that this is also a method.

  • Note that the eval() argument, with parentheses around the string, is required otherwise an error will be reported.

  • Because a JSON string is surrounded by curly braces (” {} “), direct eval() will be executed as a statement block, so parentheses should be added to make it an expression.

6.2, JSON. The parse ()

  • Most browsers now support itJSON.parse().Is recommended.
  • If a non-conforming string is entered, an error is reported.

Example: JSON string to JS object

<script> var STR = '{"name":" xi xi ","age":22}'; var obj = JSON.parse(str) console.log(obj) </script>Copy the code

  • JSON.parse()You can have a second argument, which is a function. This function takes two arguments:The name and valueRepresents the name and value, respectively. When passed a JSON string, each group of JSONName/value pairsThis function is called. This function has a return value, which is assigned to the current name.
  • With the second argument, you can do some processing on the data while parsing the JSON string.

Case study:

<script> var STR = '{"name":" xi xi ","age":22}'; var obj = JSON.parse(str,fun); function fun(name,value){ console.log(name+":"+value); return value } console.log(obj) </script>Copy the code

If the JSON string name=age, set the value of age to 14

<script> var STR = '{"name":" xi xi ","age":22}'; var obj = JSON.parse(str,fun); function fun(name,value){ if (name ** "age") value = 14; return value } console.log(obj) </script>Copy the code