Detailed explanation of JSON.parse and JSON.stringify usage

JSON format, (abbreviated as JavaScript Object Notation), is a text format used for data exchange and is easy to write.

Based on JavaScript native syntax, it can serialize objects, arrays, numbers, strings, Boolean values, and null.

In ES5, a JSON object was added, which is specifically used to process data in JSON format.

JSON is an object, but it only has two methods: parse and stringify . It cannot be used as a constructor and has no attributes.

 typeof JSON === 'object'

JSON.parse

JSON.parse() is used to parse a JSON string and get the corresponding JavaScript value or object.

 JSON.parse('{}') // {}
JSON.parse('true') // true
JSON.parse('null') // null

JSON.parse Syntax

 JSON.parse(text[, reviver])

• text: The string to be parsed.

  If a number is passed in, it will be converted into a decimal number and output.

  If a Boolean value is passed in, it is output directly.

  If null is passed in, null is output.

  Other types of values ​​are not supported, otherwise an error is reported.

• reviver: Optional, a converter that can be used to modify the original value generated by parsing.

Return value: JavaScript object/value, corresponding to the object/value of the given JSON text.

reviver parameters

The reviver function is used to convert and process the parsed JavaScript value and return the final result after processing.

Conversion process:

• The parsed value itself and all the attributes it may contain are called in a certain traversal order. The reviver function is passed in as the two parameters key and value .

  Traversal order: Traverse from the inside to the outside according to the hierarchy, and finally reach the top layer, which is the parsed value itself.

• If reviver returns undefined, the object is deleted. If it returns another value, that value becomes the new value of the current property.
• When traversing to the top level, because there are no attributes, the parameter key is an empty string '' , and the parameter value is the current parsed value.

For the two parameters key and value of the reviver function, different data types:

• Basic value type data (string, number, boolean) and null, as well as empty objects {} and empty arrays [] :

  Then key is an empty string and value is the corresponding parsed value.

  Because it is already the top level, it has no other attributes.

• Object:

  Then both key and value exist, corresponding to the attribute name and value respectively.

  The top level will return a value where the parameter key is empty.

• Array:

  The key corresponds to the array index, and the value corresponds to the element value.

  The top level will return a value where the parameter key is empty.

Basic type conversion:

 JSON.parse('5', function (key, value) {
  console.log(`key:${key}, value:${value}`)
})
// key:, value:5
JSON.parse('null', function (key, value) {
  console.log(`key:${key}, value:${value}`)
})
// key:, value:null
JSON.parse('{}', function (key, value) {
  console.log(`key:${key}, value:`, value)
})
// key:, value:{}

Object objects and arrays:

 JSON.parse('[1, 2]', function (key, value) {
  console.log(`key:${key}, value:`, value)
})
// key:0, value: 1
// key:1, value: 2
// key:, value: (2) [empty × 2]

JSON.parse('{ "user": "张三", "info": { "age": 25, "sex": 1 } }', function (key, value) {
  console.log(`key:${key}, value::`, value)
})
// key:user, value:: Zhang San// key:age, value:: 25
// key:sex, value:: 1
// key:info, value:: {}
// key:, value:: {}

Data processing:

 JSON.parse('[1, 2]', function (key, value) {
  if(key === '') {
    return value
  }
  return value + 3
})
// [4, 5]

JSON.parse Features

When parsing a JSON string, you need to pay attention to some specifications of the JSON format, otherwise errors may occur easily.

JSON data has strict regulations on the type and format of values. The specific rules are as follows:

• This method uses string type JSON format data.

  This method also supports three types of values: numbers, Boolean values, and null, and converts them into corresponding literal values.

  No other types are supported.

 JSON.parse('"中国"')
// 'China'
JSON.parse(null) // null
JSON.parse(111.) // 111
JSON.parse(0x12) // 18
JSON.parse(true) // true
JSON.parse([])
// Uncaught SyntaxError: Unexpected end of JSON input

• Strings must be enclosed in double quotes, not single quotes.

 JSON.parse('"String"')
// 'String'
JSON.parse('\'String\'')
// Uncaught SyntaxError: Unexpected token ' in JSON at position 0

• Only decimal strings are supported, but the decimal point must be followed by a number.

 JSON.parse('111') // 111
JSON.parse('0x12')
// Uncaught SyntaxError: Unexpected token x in JSON at position 1
JSON.parse('111.232') // 111.232
JSON.parse('111.')
// Uncaught SyntaxError: Unexpected end of JSON input

• Undefined, Symbol and BigInt cannot be used. Numbers do not support NaN, Infinity and -Infinity, and errors will be reported.

 JSON.parse(undefined)
// Uncaught SyntaxError: Unexpected token u in JSON at position 0
JSON.parse(Symbol())
// Uncaught TypeError: Cannot convert a Symbol value to a string
JSON.parse('12n')
// Uncaught SyntaxError: Unexpected token n in JSON at position 2

• Composite types can only be literals such as [] and {} .

  The object constructor cannot be used because it will be treated as an execution statement and is not supported.

  Object and Array cannot be used, and functions, RegExp objects, Date objects, Error objects, etc. are not allowed.

 JSON.parse('[]')
// []
JSON.parse('Object()')
// Uncaught SyntaxError: Unexpected token O in JSON at position 0

• Object attribute names must be enclosed in double quotes.

 JSON.parse('{"key": 1 }')
// {key: 1}
JSON.parse('{key: 1 }')
// Uncaught SyntaxError: Unexpected token k in JSON at position 1

• A comma cannot be placed after the last member of an array or object.

 JSON.parse('[1, 2, 3, 4, ]')
// VM2771:1 Uncaught SyntaxError: Unexpected token ] in JSON at position 13
JSON.parse('{"key" : 1, }')
// VM2779:1 Uncaught SyntaxError: Unexpected token } in JSON at position 12

• Supports unicode escapes.

 JSON.parse('{"\u0066":333}')
// {f: 333}

• Some control characters and escape characters are not supported, such as '\n' and '\t'.

 JSON.parse('"\n"')
// Uncaught SyntaxError: Unexpected token 

Other methods of parsing

To convert a json string into a json object (js object value), you can also use other methods, but they are not safe codes.

 const str = '{"name":"json","age":18}'
  const json = JSON.parse(str)
  const json = eval("(" + str + ")")
  const json = (new Function("return " + str))()

JSON.stringify

JSON.stringify() converts a JavaScript object or value to a JSON formatted string.

JSON.stringify Syntax

 JSON.stringify(value[, replacer [, space]])

• value: The JavaScript object or value to be serialized into a JSON string.
• replacer Optional, used to process the value to be serialized.
• space is optional and specifies a blank string for indentation, used to beautify the output.

Return value: A JSON-formatted string representing the given value.

replacer parameter

The replacer parameter can be one of the following three situations:

• If it is null, undefined or other types, it is ignored and not processed;

 JSON.stringify({key: 'json'}, null, null) // '{"key":"json"}'
JSON.stringify({key: 'json'}, true) // '{"key":"json"}'

• If it is an array, only the attribute names contained in this array will be serialized into the result string;

  Only valid for object properties, not for arrays.

 const obj = {
  json: 'JSON',
  parse: 'PARSE',
  stringify: 'STRINGIFY'
}
JSON.stringify(obj, ['parse', 'stringify'])
// '{"parse":"PARSE","stringify":"STRINGIFY"}'

• If it is a function, each attribute of the serialized value will be transformed and processed by the function;

Processing process:

• The function has two parameters, the attribute name (key) and the attribute value (value), both of which will be serialized;
• When called for the first time, key is an empty string and value is the entire object to be serialized.
• During the second processing, the result of the first processing will be passed over, and each subsequent processing will receive the result of the previous processing;
• Afterwards, each attribute name and attribute value will be processed in turn and returned after completion.

 JSON.stringify({ json: 1, stringify: { val: 'rr'} }, (key, value) => {
  console.log(`key: ${key}, value:`, value)
  return value
}) 
// key: ，value: {json: 1, stringify: {…}}
// key: json, value: 1
// key: stringify, value: {val: 'rr'}
// key: val, value: rr
// '{"json":1,"stringify":{"val":"rr"}}'

Type processing of value:

• If a primitive type string, number, Boolean value, or null is returned, it is directly added to the serialized JSON string;
• If other objects are returned, the properties of the object will be serialized in sequence later. If it is a function, no processing will be done;
• If this returns true or undefined, the property will not be output.
• When serializing an array, if value returns undefined or a function, it will be replaced by null.

 JSON.stringify({ json: 1, stringify: 'rr' }, (key, value) => {
  if (typeof value === 'number') {
    return 'ss'
  }
  return value
}) 
// '{"json":"ss","stringify":"rr"}'

JSON.stringify({ json: 1, stringify: 'rr' }, (key, value) => {
  if (typeof value === 'number') {
    value = undefined
  }
  return value
}) 
// '{"stringify":"rr"}'

The following example shows how to return an object value:

 JSON.stringify({ json: 1, stringify: 'rr' }, (key, value) => {
  if (typeof value === 'object') { // The first time the entire object is returned, the type is object
    return { parse: 'dd' }
  }
  return value
}) 
'{"parse":"dd"}'

space parameter

The space parameter is used to control the spacing in the result string and beautify the output. There are three possible values ​​to enter:

• If it is a number, when serializing, each level is indented with more spaces corresponding to the number value than the previous level, ranging from 1 to 10, that is, a minimum of 1 and a maximum of 10 spaces;
• If it is a string, it will be added to the front of each line during serialization, and each level will be indented more than the previous level, up to a maximum of characters. If it exceeds, the string will be truncated;
• If it is null, undefined or other types, it is ignored and not processed.

 JSON.stringify({key: 'json'}, null, 2)
// '{\n "key": "json"\n}'
JSON.stringify({key: 'json', list: { str: 'str' } }, null, '|-')
// '{\n|-"key": "json",\n|-"list": {\n|-|-"str": "str"\n|-}\n}'
JSON.stringify({key: 'json'}, null, null)
// '{"key":"json"}'

JSON.stringify Feature

• Basic type values ​​such as string, number, Boolean value, as well as String, Boolean, and Number object values ​​will be converted to primitive value strings for output.

 JSON.stringify(333) // '333'
JSON.stringify(true) // 'true'
JSON.stringify(new String('333')) //'"333"'
JSON.stringify(Boolean(true)) // 'true'

• For basic string types, the conversion result will be enclosed in double quotes.

  Because when you restore, the double quotes let JavaScript know that it is a string, not a variable.

 JSON.stringify('json') === 'json' // false
JSON.stringify('json') === '"json"' // true

• undefined, functions, symbols, and XML objects:

• When it appears in an Object object, it will be ignored;
• When it appears in an array, it will be serialized as null;
• When used alone, it returns undefined.

 JSON.stringify(Symbol()) // undefined
JSON.stringify([Symbol(), Math.abs, undefined]) // '[null,null,null]'
JSON.stringify({ [Symbol()]: Math.abs, key: undefined }) // '{}'

• Values ​​such as NaN, Infinity, and -Infinity, as well as null, are serialized as null.

 JSON.stringify(null) // 'null'
JSON.stringify(NaN) // 'null'

• Object objects, as well as composite type objects such as Map/Set/WeakMap/WeakSet , will ignore the non-traversable properties of the objects during serialization.

 const obj = {}
Object.defineProperties(obj, {
  'json': { value: 'JSON', enumerable: true },
  'stringify': { value: 'STRINGIFY', enumerable: false }
})
JSON.stringify(obj)
// '{"json":"JSON"}'

• Attributes with symbol as their name will be ignored.

 JSON.stringify({[Symbol()]: 333}) // '{}'

• In addition to arrays, the properties of other objects may be out of order when serialized.

 const a = { '1': 911, 'r': 822, '11': 9922}
JSON.stringify(a)
// '{"1":911,"11":9922,"r":822}'

• If the converted object defines toJSON() method, the return value of this method is the serialization result of the converted object.

  The process ignores other attributes.

 const a = { key: 'json' }
a.toJSON = () => 'JSON'
JSON.stringify(a)
// '"JSON"'

• RegExp objects and Error objects are serialized as empty object strings.

 JSON.stringify(/\d/) // "{}"
JSON.stringify(new Error()) // "{}"

If you want to serialize the corresponding object, you need to set and implement the toJSON method.

 RegExp.prototype.toJSON = RegExp.prototype.toString
JSON.stringify(/\d/) // '"/\\\\d/"'

• The Date object has toJSON() defined, which converts it to a string, so it can be serialized.

  Same as Date.toISOString() .

 JSON.stringify(new Date())
// '"2021-12-31T02:24:05.477Z"'

• Executing this method on a circularly referenced object will throw an error.

  Objects reference each other, forming an infinite loop.

 const a = {}
a.key = a
JSON.stringify(a)
// Uncaught TypeError: Converting circular structure to JSON

• Converting a BigInt value will throw a TypeError.

  BigInt value cannot be JSON serialized

 JSON.stringify(12n)
// Uncaught TypeError: Don't know how to serialize a BigInt

• Better support for unicode escapes

 const a = {'\u0066': 333}
JSON.stringify(a)
// '{"f":333}'

This concludes this article on the detailed usage of JSON.parse and JSON.stringify. I hope it will be helpful for everyone’s study, and I also hope that everyone will support 123WORDPRESS.COM.