JavaScript Fundamentals: JSON

Aphinya Dechalert -

JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax. It is commonly used for transmitting data in web applications (e.g., sending some data from the server to the client, so it can be displayed on a web page, or receiving user input and sending it back to the server).

JSON is a text format that is completely language independent but uses conventions that are familiar to programmers of the C-family of languages (C, C++, JavaScript, etc.). These properties make JSON an ideal data-interchange language.

JSON is built on two structures:

  • A collection of name/value pairs. In various languages, this is realized as an object, record, struct, dictionary, hash table, keyed list, or associative array.
  • An ordered list of values. In most languages, this is realized as an array, vector, list, or sequence.

These are universal data structures. Virtually all modern programming languages support them in one form or another. It makes sense that a data format that is interchangeable with programming languages also be based on these structures.

What JSON looks like:

An example of JSON data:

var data = {
  "name": "John Smith",
  "age": 20,
  "address": {
    "street": "123 Main Street",
    "city": "New York",
    "state": "NY",
    "zip": 10021
  },
  "phoneNumbers": [
    {
      "type": "home",
      "number": "212 555-1234"
    },
    {
      "type": "office",
      "number": "646 555-4567"
    },
    {
      "type": "mobile",
      "number": "917 555-6789"
    }
  ]
}

This data could be represented in XML as follows:

<data>
  <name>John Smith</name>
  <age>20</age>
  <address>
    <street>123 Main Street</street>
    <city>New York</city>
    <state>NY</state>
    <zip>10021</zip>
  </address>
  <phoneNumbers>
    <phoneNumber>
      <type>home</type>
      <number>212 555-1234</number>
    </phoneNumber>
    <phoneNumber>
      <type>office</type>
      <number>646 555-4567</number>
    </phoneNumber>
    <phoneNumber>
      <type>mobile</type>
      <number>917 555-6789</number>
    </phoneNumber>
  </phoneNumbers>
</data>

While XML is very powerful, it is also quite verbose. JSON is much more compact.

Using JSON.stringify()

If you’ve ever worked with JavaScript, chances are you’ve come across the JSON.stringify() method. This handy little method allows you to convert data into a JSON string, which can be used for a variety of purposes.

What is JSON.stringify()?

JSON.stringify() is a method that converts data into a JSON string. JSON strings are often used for transferring data over the internet, as they are easy to read and parse.

How does JSON.stringify() work?

The JSON.stringify() method takes a JavaScript object and converts it into a JSON string. It can optionally take a second argument, which is a replacer function. This function can be used to modify the data before it is converted into a string.

Once the data has been converted into a JSON string, it can be stored in a variable or database, or it can be passed to a function that expects a JSON string.

how does JSON.stringify() replacer work?

The replacer function can be used to filter-out values before they are stringified.

For example, the following code will stringify an object, but only include properties with values greater than 10:

var obj = { a: 1, b: 20, c: 300 }; 

JSON.stringify(obj, function(key, value) { 
    return (value > 10) ? value : undefined; }); // '{"b":20,"c":300}'
}

What are some potential uses for JSON.stringify()?

There are a number of potential uses for the JSON.stringify() method. One common use is to transfer data over the internet. For example, if you have a web application that stores data in a database, you may use JSON.stringify() to convert that data into a JSON string before sending it to the client. This ensures that the data is in a format that can be easily read and parsed by the client.

Another potential use for JSON.stringify() is to pretty-print JSON data. Pretty-printing is the process of formatting data so that it is easy to read. This can be useful when you are debugging your code, as it can help you to spot errors more easily. To pretty-print JSON data, you can pass the JSON.stringify() method a replacer function that formats the data in a specific way.

The following example shows how to use the JSON.stringify() method to convert the above xml data into JSON:

var json = JSON.stringify(data);

console.log(json);

The output will be:

{"name":"John Smith","age":20,"address":{"street":"123 Main Street","city":"New York","state":"NY","zip":10021},"phoneNumbers":[{"type":"home","number":"212 555-1234"},{"type":"office","number":"646 555-4567"},{"type":"mobile","number":"917 555-6789"}]}

Using JSON.parse()

JSON.parse() is a built-in JavaScript function that parses a JSON string and returns the JavaScript equivalent. If the input is not a valid JSON string, then JSON.parse() will throw an error.

For example, the following JSON string is not well-formed because it is missing a closing curly brace:

'{"foo": "bar"'

Attempting to parse this string with JSON.parse() will result in an error.

what is JSON.parse()?

This 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.

How does JSON.parse() work?

The JSON.parse() 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.

What are some potential uses for JSON.parse()?

Some potential uses for JSON.parse() could include:

  • Parsing JSON data from a web API
  • Parsing JSON data from a local file
  • Parsing JSON data from a string

Once you have a well-formed JSON string, you can use JSON.parse() to convert it into a JavaScript object. The following example shows how to use the JSON.parse() method to convert a JSON string into a JavaScript object:

var data = '{"name":"John Smith","age":20,"address":{"street":"123 Main Street","city":"New York","state":"NY","zip":10021},"phoneNumbers":[{"type":"home","number":"212 555-1234"},{"type":"office","number":"646 555-4567"},{"type":"mobile","number":"917 555-6789"}]}';

var obj = JSON.parse(data);

console.log(obj);

The output will be:

{
  "name": "John Smith",
  "age": 20,
  "address": {
    "street": "123 Main Street",
    "city": "New York",
    "state": "NY",
    "zip": 10021
  },
  "phoneNumbers": [
    {
      "type": "home",
      "number": "212 555-1234"
    },
    {
      "type": "office",
      "number": "646 555-4567"
    },
    {
      "type": "mobile",
      "number": "917 555-6789"
    }
  ]
}

As you can see, the JSON.parse() method parses a JSON string and converts it into a JavaScript object.