Working with JSON

Enrico Gruner
Jun 29, 2020 · 3 min read

How to solve circular references and revive an object.

Photo by Jimmy Chang on Unsplash

Working with JSON Objects and their representations is a crucial part of developing in JavaScript. They also come with powerful built-in functionalities that I rarely see in action. Two essential functions are replacing and reviving.

How to solve: Converting circular structure to JSON

Despite being used not that often, replacing allows for a simple solution to a common problem: Converting circular structures.

Consider the following example:

This example represents a circular structure because a hero has a team, and the team holds a reference to the hero. does not know how to solve this. We can solve it manually using the second argument of ! This parameter is called a replacer. We can provide an array of all the attributes that we want to include.

As you can see, we get the name of our hero, as well as the name of our team, by providing the attributes name and team. Any given attribute will apply for nested objects. However, this could become quite messy for complex structures. Luckily we can also provide a function instead of an array as a replacer.

This implementation is making use of the simple fact that any undefined value gets omitted from the JSON string. The replacer function receives the key, as well as the value for its arguments. You can create sophisticated filters with this technique.

Make an Object stringify-able

Sometimes we would like to get a particular representation of our object, which might differ from its actual structure. This can be useful for complex objects, or whenever we just want to extract a few attributes. We can also avoid circular structures using this method.

The example above is working because will try to find a -method on the object first, before falling back to the default implementation.

Reviving a stringified Object

One of the biggest hurdles with JSON strings is that they do not save any information on how they were originally typed. JavaScript cannot infer types, so it is up to you as a developer to do this.

The date object exposes several attributes, but the result of is a simple string. Even only returns a string. We also see a different implementation of the and -method.

Let us turn that string back into a date object.

We have got a date object! The reviver can be used whenever you want to restore an object with all of its functionality. Its usage is similar to the replacer that we have used to avoid circular structures.

Recap

You have learned, …

  • … how to avoid circular structures when stringifying an object.
  • … how to manipulate the return value of for your own objects, using the interface.
  • … how to restore objects using a reviver.

That’s all, folks!

The Startup

Get smarter at building your thing. Join The Startup’s +794K followers.

Sign up for Top 10 Stories

By The Startup

Get smarter at building your thing. Subscribe to receive The Startup's top 10 most read stories — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Enrico Gruner

Written by

Web developer since 1999

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +794K followers.

Enrico Gruner

Written by

Web developer since 1999

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +794K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store