Working with JSON

Working with JSON

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.

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

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

JSON Tutorial For Beginners | What is JSON | Learning JSON with JavaScript

JSON Tutorial For Beginners | What is JSON | Learning JSON with JavaScript

JavaScript Tutorial 50 - Promises in JavaScript

JavaScript Tutorial 50 - Promises in JavaScript - This tutorial describes how to create and handle promises in JavaScript.

Javascript Tutorial - Working with JSON in MVC

In this post, you'll see which explains the basic use of JSON in MVC.

Javascript | How To Covert Javascript Array To JSON

In this example, we will see How To Covert Javascript Array To JSON. We can convert Javascript array to json using JSON.stringify() method. At some point in your time, whatever developer you are, you need to deal with JSON data. JSON stands for Javascript Object Notation. Exchange data between client and server is straightforward using JSON.

JSON Tutorial: Usage with JavaScript or PHP

JSON is used to transmit data between a server and a browser. Here is a basic example of what might be in a string. As you can see, it's a…