Basics

`
{
  "name": "John",

  "age": 23
}
`

const person = {
  "name": "John",
  "age": 23
};

JSON Parsing / Deserialization

const jsonString = `
{
  "name": "John",
  "age": 23
}
`;

const obj = JSON.parse(jsonString);

console.log(obj); // { name: 'John', age: 23 }

console.log(obj.name); // 'John'
console.log(obj.age); // 23

console.log(typeof obj); // 'object'
console.log(typeof obj.name); // 'string'
console.log(typeof obj.age); // 'number'

JSON Serialization

const person = { name: 'John', age: 23 };

const jsonString = JSON.stringify(person);

console.log(typeof jsonString); // 'string'

console.log(jsonString);
// '{"name":"John","age":23}'

let obj;
obj = {"name":"John","age":23};
obj = {
  "name": "John",
  "age": 23
};

JSON Data Types

Valid values are are limited to string, number, boolean, null, array and object.

console.log(JSON.parse(`
{
  "name": "John Doe",
  "age": 30,
  "isMarried": true,
  "children": null,
  "phoneNumbers": [
    { "type": "home", "number": 14124124 },
    { "type": "mobile", "number": 13141412 }
  ],
  "address": {
    "streetNumber": 123,
    "streetName": "Main St"
  }
}
`));

JSON Root Values

console.log(JSON.parse('"John"')); // 'John'

console.log(JSON.parse('23')); // 23

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

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

console.log(JSON.parse('[1, 2, 3]'));
// [1, 2, 3]

console.log(JSON.parse('{"name": "John"}'));
// { name: 'John' }

toJSON

class Person {
  constructor(config) {
    this.config = config;
  }

  toJSON() {
    return {
      type: 'person',
      ...this.config
    };
  }
}

const person = new Person({ name: 'John', age: 25 });

console.log(JSON.stringify(person));
// '{"type":"person","name":"John","age":25}'

Transcript

00:00

One of the most daunting, yet surprisingly easy thing to master as a JavaScript developer is Jason added score. Jason is simply a string based data transfer format. It only supports a limited set of values. For example, here we have an object. The object itself has a few other values over here. For example, we have a string and then we have a number. All keys of an object must be coded using double codes. The key and value is separated by a colon and the different keys are separated by commerce. It looks very similar to a JavaScript object, and in fact, if you write the same syntax as JavaScript, it is going to be perfectly valid.

00:35

So no surprise. Jason stands for JavaScript object notation. A key tenant is that unlike some binary format, Jason is very human readable, at least for someone who knows JavaScript. The first J parser was written in JavaScript, and if you're using some other programming language, you might still need to install an external library, but for JavaScript, you don't need to install anything extra as the runtime has first class support for JS serialization and decentralization as a part of the built-in JS module. So here we have some JSON content stored in a very simple string and we can pass this string into a real JavaScript object by using the JSON dot pass method.

01:13

This method takes that string and converts it into its JavaScript equivalent. So what we get back for this particular input is a real object. We can access its name property, its age property. We can verify that the types are correct as well. The type of object would be object. The type of object.name would be string and the type of object dot age would be number. The process of converting an input JSON string into its JavaScript equivalent is called decentralization, which we are doing using the JS dot pass method. We can also do the opposite of taking a JavaScript object and converting it to its JSON equivalent,

01:48

also called serialization using the JSON do string i method. Of course, this gives back a string which we can verify using the type of operator. Now, if you log this string out, you'll notice that it is quite compressed. This is because JSON liked JavaScript is not white space sensitive, so just like it doesn't matter if you write our object in JavaScript on a single line or on multiple lines, it doesn't matter in J either because it is a string friendly format designed for simple data transfer J doesn't support the full set of JavaScript data types. In addition to the simple values that we've looked at, which is string,

02:23

for example, John Doe number, for example, 30, Jason also supports bullions, which are true and false, the null value arrays, and of course the arrays can contain any of the data type that Jason supports. For example, here we have an array that consists of two objects, which in turn again contain strings and numbers. And then finally you can have other objects as well. And of course, once this gets passed, we get the same equivalent of writing this code in JavaScript. Jason is a strict subset of JavaScript,

02:55

so all valid Jason is a valid JavaScript expression, But on the other hand, all valid JavaScript is not valid jss. Beyond the type restrictions that we've looked at, there are a few other syntax restrictions that also only apply to jss. The first restriction has to do with trailing commas. So while you can have trailing commas in raisin JavaScript, they are not valid in json. Since it is invalid, the built-in JSON dot pass function will throw an error. Similarly, we can have trading commas at the end of object properties. That is also not valid in js. The other big restriction is that you must use double codes everywhere,

03:30

so single coated strings are not supported. That will throw an error. And similarly, the keys also need to be double coded. While it is valid to use single codes for keys within JavaScript, that is not going to work within json. If we follow these two simple rules that no railing commas and always use double codes, then we will be fine. A little known fact is that all of the supported values in jss are actually valid jss even by themself. Now, of course, we can use json do pass to pass an object, but we can actually use it to pass a string as well. We can use it to pass a number.

04:03

We can use it to pass a bullion to pass L value, and of course we can use it to passe a array as well. Now, even though these are all examples of valid, most commonly you will be using an object at the root of your JSON content. There are some values that can appear in JavaScript objects that get handled differently by J than you might expect. As you've mentioned, Jason supports the JavaScript number data type and it supports everything that is type of number except for the special values Nan and Infinity. Whenever Jason string five finds these values in our objects,

04:37

it actually replaces them with a null value. The reason here is that these values might not be supported in other programming languages, so converting them to null makes for a better cross language experience. In addition to these special values, there is one more special value that you should watch out for and that value is undefined since age is pointing to undefined. If we try to read person dot age right now, the JavaScript run time gives us undefined, but that is also the value that the JavaScript run time gives us for any property that doesn't exist on the person object, and based on this fact, Jason Stringier treats an undefined pretty much as an absent property,

05:14

so names still gets serialized, but the age property which is pointing to undefined gets completely removed from the output. Now, if you do want to serialize the fact that a property exists but its value is absent, then of course the answer is use an explicit now and now J do. String gify will preserve that property with the value pointing to now the J string I method actually takes a few additional optional arguments that can be used to customize the generated js string. Consider the simple JavaScript object considering of foundation pointing to string barilla and ear pointing to the number 1998.

05:50

We can customize how this object will get serialized by creating our own custom replacer function for each property that Jason has to serialize. It'll invoke this function with the key and the value. We can do lots of cool stuff in this function. For example, we can remove all of the properties where the value is of type string by returning undefined because as we know undefined values result in property omission with Jason Stringier, we can return some other value as well. For example, for the key ear, we can sort of mask it by returning the string star, star, star, star. And for everything else,

06:23

we can leave it unchanged by returning the value as is to use this replace a function, we pass it as a second optional argument to Jason or Stringier. And of course, forearm Mozilla example foundation is removed because it is of type string and ear is masked. In addition to the second optional argument string, Gify actually takes a third optional argument as well, which is used to determine the intent. As you know, if we have an object and we try to just string justify it, we get back a pretty compressed string. Using the third argument, we can pass in a number to nicely format the generated string, for example,

06:59

HA are formatting it with two spaces. You can also customize how your JavaScript classes get serialized by adding a custom two JSON method. For example, haa, a simple classs person that takes a config object and then notes it down as its config property. We can customize how this class instances get serialized by providing a two Jason method, and whatever we return from this method is what will actually get serialized by Jason Rod string gify. Here we are saying that when the person gets serialized, it should contain everything that gets passed as the config and in addition, the type property with the value person string. To demonstrate that,

07:36

let's just create a new person with a name, John, and the age 25. And now if you try to Jason notify the person, our two Jason will get called and the resulting output will contain type person. In addition to the config that we passed in, which is name John age 25. I hope you enjoyed this tutorial. As always, thank you for joining me and I'll see you in the next one.

Pro Members Only

This lesson is available if you have an active subscription.

Alternatively, some member might be able to gift it to you.

Professional Modern JavaScript Lessons

JSON Masterclass

Subscription Required