Using JSON.stringify() for custom serialization of an object

Question

Using JSON.stringify() for custom serialization of an object

Imagine there is an object called a with properties:

const a = {
  foo: 123,
  bar: 'example'
}

Now, this object is a part of another object called b like this:

const b = {
  a: a,
  anotherField: "example"
}

While working with TypeScript, these objects belong to the same class but it's not crucial.

When converting the b object to JSON, the desired string is:

{ a: 123, anotherField: "example" }

How can we instruct JSON.stringify() to format the a object in this way?

Perhaps something akin to the features available in Python could be useful.

javascript json typescript

Answer 1

Answer №1

In the context of a, you have the option to define the toJSON method.

When an object that is being converted to a string has a property called toJSON with a value that is a function, the toJSON() method can be used to customize the behavior of JSON stringification. Instead of serializing the object itself, the value returned by the toJSON() method will be serialized.

(source: MDN)

For instance:

class A {
  constructor(foo, bar) {
    this.foo = foo;
    this.bar = bar;
  }

  toJSON() {
    return this.foo;
  }
}

const a = new A(123, "some name");
const b = {
  a: a,
  anotherField: "example"
};

console.log(JSON.stringify(b)); // "{"a":123,"anotherField":"example"}"

Answer 2

In the context of a, you have the option to define the toJSON method.

When an object that is being converted to a string has a property called toJSON with a value that is a function, the toJSON() method can be used to customize the behavior of JSON stringification. Instead of serializing the object itself, the value returned by the toJSON() method will be serialized.

(source: MDN)

For instance:

class A {
  constructor(foo, bar) {
    this.foo = foo;
    this.bar = bar;
  }

  toJSON() {
    return this.foo;
  }
}

const a = new A(123, "some name");
const b = {
  a: a,
  anotherField: "example"
};

console.log(JSON.stringify(b)); // "{"a":123,"anotherField":"example"}"

Answer 3

Answer №2

To implement custom stringification while using the replacer during the stringify process, you can do the following:

 const result = JSON.stringify(b, (k, v) => v && v.stringify() || v);

This technique allows you to easily incorporate a personalized stringification for a like so:

 const a = {
   foo: 123,
   bar: 'example',
   stringify() { return this.foo; }
 }

Answer 4

To implement custom stringification while using the replacer during the stringify process, you can do the following:

 const result = JSON.stringify(b, (k, v) => v && v.stringify() || v);

This technique allows you to easily incorporate a personalized stringification for a like so:

 const a = {
   foo: 123,
   bar: 'example',
   stringify() { return this.foo; }
 }

Using JSON.stringify() for custom serialization of an object

Answer №1

Answer №2

Similar questions

Step-by-step guide to swapping an element with a textarea element using javascript

Issues with applying different styles in a React Component based on prop values are hindering the desired outcome

Creating multiple React applications using shared configuration files: A step-by-step guide

I'm curious as to why IPC messages from one menu item in Electron can successfully reach my window, but when sent from a different menu item, they do not seem to

Bring in styles from the API within Angular

Issue encountered with the openpgpjs example: `'The function openpgp.encrypt is not defined'`

Change the WordPress Divi Builder nav bar to switch from transparent to white when scrolling or upon reaching a specific point on the page

When the start and end times are the same, the time picker is returning a null value

What are the recommended TypeScript tsconfig configurations for running Node.js 10?

Having issues with jsonSerializer.Deserialize when it comes to handling unicode characters in c#

The error message "Adyencheckout is not a constructor" is popping up in my

Updating reference value with a watcher using Vue 3 and the Composition API

import PHP code to extract JSON data

Assign a value to ng-model using JavaScript

Angular: Incorporating a custom validation function into the controller - Techniques for accessing the 'this' keyword

I am experiencing issues with my three.js script not functioning properly within the context of a

Exploring the integration of angular-ui-select into an angular seed project

What is the best way to verify a numerical input in a React component?

Creating a custom math formula using a combination of Javascript and PHP

I am looking to showcase the information from two separate collections