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:

const hero = {
	  name: 'Arthas',
	  level: 55
	}

	const team = {
	  name: 'Team Red',
	  heroes: [hero]
	}

	// lets consider that a hero knows about his team
	hero.team = team;

	JSON.stringify(hero);
	// -> Uncaught TypeError: Converting circular structure to JSON

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

const hero = {
	  name: 'Arthas',
	  level: 55
	}

	const team = {
	  name: 'Team Red',
	  heroes: [hero]
	}

	// lets consider that a hero knows about his team
	hero.team = team;

	console.log(JSON.stringify(hero, ['name']));
	// -> {"name":"Arthas"}

	console.log(JSON.stringify(hero, ['team']));
	// -> {"team":{}}

	console.log(JSON.stringify(hero, ['team', 'name']));
	// -> {"team":{"name":"Team Red"},"name":"Arthas"}

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.

const hero = {
	  name: 'Arthas',
	  level: 55
	}

	const team = {
	  name: 'Team Red',
	  heroes: [hero]
	}

	// lets consider that a hero knows about his team
	hero.team = team;

	const jsonString = JSON.stringify(hero, function(key, value) {
	  return (key === 'heroes') ? undefined : value;
	});

	console.log(jsonString);
	// -> {"name":"Arthas","level":55,"team":{"name":"Team Red"}}

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.

#javascript-tutorial #json #javascript-basics #javascript #circular-reference