Serialize objects to JSON

Share this video with your friends

Social Share Links

Send Tweet
Published 7 years ago
Updated 5 years ago

JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate.

Doing JSON serialization and deserialization in JavaScript and TypeScript is super easy as it is a format essentially designed for this language. This lesson covers the JSON.stringify primitive provided by JavaScript runtimes.

[00:00] JavaScript provides a native object called JSON that provides methods for parsing -- that is, the process of converting JSON strings to JavaScript objects, and string define, that is, the process of converting JavaScript objects to JSON strings. Beyond these two methods, the JSON object has no additional functionality. For utilization to JSON strings, you would use the JSON.stringify() method.

[00:26] To demonstrate JSON.stringify(), let's create an example object foo with the property bar, set to the number 123. The JSON representation of this object would be a string where each key is wrapped in double quotes. Indeed, that is exactly the string returned by calling JSON.stringify() on this object. I've just spelled out the naked string returned from JSON.stringify() from now on.

[00:55] JSON.stringify() will escape any directives that need escaping. For example, double quotes in object keys are escaped as shown. Similarly, it will also escape correctors and string values if needed.

[01:14] JSON.stringify() is an array of the following coordinative types -- strings, numbers, objects, which in turn contain other utilizable values, arrays, which contain other utilizable values, Booleans and null. By default, JSON.stringify() stabilizes the object into a single-line string with zero spaces.

[01:45] To allow you to format the string a bit better, JSON.stringify() function takes two additional arguments -- a replacer and a space. Both of these arguments are optional.

[01:58] The space argument can be used to customize the indentation of the output. Passing in a string for the space argument uses that string for indents. For example, you can pass in the tab character. Passing in a number for the space argument uses that many spaces for indents. For example, the number two indents each section with two spaces.

[02:23] The replacer argument function can be used to customize the behavior for particular keys and values. For example, if you have a key that is not at the root, we can replace each value with the key, and for the root, it will still use the value. This results in all the values other than the root getting replaced by their keys.

[02:53] Personally, I do all my customizations in the object before passing it to stringify() and have the replacer argument as null.

[03:01] JSON.stringify() will also convert JavaScript date objects into an ISO 8601 string representation, which is excellent for transferring date/time information. Underneath, it works by simply calling the native date objects through a JSON method, which returns the same string.

[03:22] You can provide the two JSON methods to customize the data utilization for any of your objects as well. For example, here we have a simple object that stabilizes to the string as expected. You can override this output by providing two JSON methods. Now, the object stabilized to the string returned by JSON.

[03:46] Let's talk about a few of the limitations of JSON.stringify(). Native types that don't have a special representation for JSON will not stabilize well. For example, native regular expressions will not stabilize well by default. Functions cannot be stabilized to JSON values, and therefore keys pointing to functions are generally ignored by JSON.stringify().

[04:12] Finally, the biggest limitation of JSON.stringify() is that it cannot stabilize an object in cycles and cyclic references. Having an object foo with the property bar pointing back to foo. JSON.stringify() will throw a runtime error in this case.

egghead
egghead
~ 8 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today