JSON
The JSON namespace object contains static methods for parsing values from and converting values to JavaScript Object Notation (JSON).
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 3 | 12 | 3.5 | 4 | 18 | 4 | |
| JSON is a syntax for serializing objects, arrays, numbers, strings, booleans, and null. It is based upon JavaScript syntax, but is distinct from JavaScript: most of JavaScript is not JSON. For example: | 66 | 79 | 62 | 12 | 66 | 12 |
| The JSON.parse() static method parses a JSON string, constructing the JavaScript value or object described by the string. An optional reviver function can be provided to perform a transformation on the resulting object before it is returned. | 3 | 12 | 3.5 | 4 | 18 | 4 |
| The JSON.stringify() static method converts a JavaScript value to a JSON string, optionally replacing values if a replacer function is specified or optionally including only the specified properties if a replacer array is specified. | 3 | 12 | 3.5 | 4 | 18 | 4 |
JSON.stringify.well formed stringify Strings are escaped to well-formed UTF-8 | 72 | 79 | 64 | 12.1 | 72 | 12.2 |
Syntax
// Parse
const obj = JSON.parse('{\"name\": \"Taro\", \"age\": 25}');
// Convert to string
const json = JSON.stringify(obj);
// Format output
JSON.stringify(obj, null, 2);
// Use `replacer` to output only specific keys
JSON.stringify(obj, ['name']); // '{\"name\":\"Taro\"}' Live demo
Formatted output with JSON.stringify
Use the third argument (spacing) to format the output in a readable way.
Extract specific keys with replacer
Serialize only the keys passed in the replacer array.
Use cases
-
API payload handling
Decode server responses and prepare client data for transport in a well-known text format.
-
Storing structured data
Serialize lightweight state or exportable records when a plain text representation is useful.
Cautions
- JSON loses functions, undefined, and some richer object types, so it is not a general-purpose cloning strategy.
- Parsing untrusted text should be paired with schema or shape validation before the data drives application logic.
Accessibility
- If parsed data feeds user-facing UI, validate labels and text so broken payloads do not produce confusing or empty interfaces.