This is an important message requiring you to make a choice if you're based in the EU.

Working with JSON

In this chapter we will learn about JavaScript Object Notation.

JSON (JavaScript Object Notation) is a thing, which makes easy to work with data from backend or even in frontend.

JavaScript Object Notation is an open standard format that uses human-readable text to transmit data objects consisting of attribute-value pairs. It is mainly used to transfer data between a server and web application, as an alternative to XML.

Let's see what JSON looks like.

    "title": "apples",
    "count": [12000, 20000],
    "description": {"text": "...", "sensitive": false}
    "title": "oranges",
    "count": [17500, null],
    "description": {"text": "...", "sensitive": false}

Let's talk a little about JSON types. Here are the types, which every developer has to know.

  • Number — a signed decimal number that may contain a fractional part and may use exponential E notation. JSON does not allow non-numbers like NaN, nor does it make any distinction between integer and floating-point. (Even though JavaScript uses a double-precision floating-point format for all its numeric values, other languages implementing JSON may encode numbers differently)
  • String — a sequence of zero or more Unicode characters. Strings are delimited with double-quotation marks and support a backslash escaping syntax.
  • Boolean — either of the values true or false
  • Array — an ordered list of zero or more values, each of which may be of any type. Arrays use square bracket notation with elements being comma-separated
  • Object — an unordered collection of name/value pairs where the names (also called keys) are strings. Since objects are intended to represent associative arrays it is recommended, though not required, that each key is unique within an object. Objects are delimited with curly brackets and use commas to separate each pair, while within each pair the colon ':' character separates the key or name from its value
  • null — An empty value, using the word null


Now let's talk about some methods which help you to work with JSON.


Parse a string as JSON, optionally transform the produced value and its properties and return the value.


JSON.parse(text[, reviver])


The string to parse as JSON. See the JSON object for a description of JSON syntax


If a function, prescribes how the value originally produced by parsing is transformed before being returned.


Returns the Object corresponding to the given JSON text.

JSON.parse('{}');                // {}

JSON.parse('true');              // true

JSON.parse('"foo"');             // "foo"

JSON.parse('[1, 7, "false"]');   // [1, 7, "false"]

JSON.parse('null');              // null

JSON.parse('{"1": 4, "2": 0}')   // Object {1: 4, 2: 0}


Return a JSON string corresponding to the specified value optionally including only specific properties or replacing property values in a user-defined manner.


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


The value to convert to a JSON string.


If a function transforms values and properties encountered while stringifying; if an array specifies the set of properties included in objects in the final string.


Causes the resulting string to be pretty-printed.

Let's see an example.

JSON.stringify({});                        // '{}'

JSON.stringify(true);                      // 'true'

JSON.stringify("foo");                     // '"foo"'

JSON.stringify([4, "false", false]);       // '[4,"false",false]'

JSON.stringify({ x: 7 });                  // '{"x":7}'

Do you find this helpful?

Related articles