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 used primarily to transmit 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 is 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

Methods

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

JSON.parse()

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

Syntax

JSON.parse(text[, reviver])

text

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

reviver

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

Returns

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}

JSON.stringify()

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

Syntax

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

value

The value to convert to a JSON string.

replacer

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.

space

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}'