The replacer argument of the JSON.stringify method doesn't seem to work properly when dealing with nested objects

Question

The replacer argument of the JSON.stringify method doesn't seem to work properly when dealing with nested objects

My dilemma is sending a simplified version of an object to the server.

{
 "fullName": "Don Corleone",
 "actor": {
  "actorId": 2,
  "name": "Marlon",
  "surname": "Brando",
  "description": "Marlon Brando is widely considered the greatest movie actor of all time... ",
  "heroList": [],
  "photo": "C:\\projects\\files\\actor\\1532955376934.png"
 },
 "heroProfilePhoto": "data:image/png;base64,/9j/...
 "production": {
  "title": "The Godfather",
  "imdbRate": 9.2,
  "genre": "8",
  "releaseDate": "1972-03-23T21:00:00.000Z",
  "director": "Francis Ford Coppola",
  "writer": "Mari Puzo",
  "detail": "The aging patriarch of an organized crime dynasty transfers control of his clandestine empire to his reluctant son."
 }
}"

I have two questions:

1) Is it possible to extract specific data using the replacer parameter in JSON.stringify() ?

 {
  "fullName": "Don Corleone",
  "actor": {
   "actorId": 2
   }
}"

2) Can I at least extract certain information using the replacer parameter of JSON.stringify()?

{
 "fullName": "Don Corleone",
 "actor": {
  "actorId": 2,
  "name": "Marlon",
  "surname": "Brando",
  "description": "Marlon Brando is widely considered the greatest movie actor of all time... ",
  "heroList": [],
  "photo": "C:\\projects\\files\\actor\\1532955376934.png"
 },
}"

When I use this syntax:

JSON.stringify(hero, ['fullName'])

Result -> "{"fullName":"Don Corleone"}"

However, with this line:

JSON.stringify(hero, ['fullName', 'actor'])

Result ->

"{"fullName":"Don Corleone","actor":{}}"

I am puzzled as to why the 'actor' property is empty.

javascript typescript

Answer 1

Answer №1

When using JSON.stringify, it's important to include all the data you want returned. Just specifying 'actor' alone is not sufficient.

To achieve the desired result, use:

JSON.stringify(hero, ['fullName', 'actor', 'actorId'])

UPDATE

I conducted some experimentation to explore the scenario where actorId exists both within the actor object and the parent object. Here's what I discovered.

JSON.stringify() outputs both instances of actorId when present in both the actor object and the parent object. To customize this behavior, a more intricate function needs to be created and passed to JSON.stringify() as outlined here

Below are some examples:

var json = {
    key1: "Value for key1 in parent",
    key2: {
        key3: "Value for key3 in child",
        key4: "Value for key4 in child"
    },
    key4: "Value for key4 in parent"
}

var out1 = JSON.stringify(json, ['key1', 'key3'])
/*
out1 = {
    key1: "Value for key1 in parent"
} // No key3!
*/


var out2 = JSON.stringify(json, ['key1', 'key2', 'key3'])
/*
out2 = {
    key1: "Value for key1 in parent",
    key2: {
        key3: "Value for key3 in child"
    }
}
*/

var out3 = JSON.stringify(json, ['key1', 'key2', 'key3', 'key4'])
/*
out3 = {
    key1: "Value for key1 in parent",
    key2: {
        key3: "Value for key3 in child",
        key4: "Value for key4 in child" // Both key4 returned
    },
    key4: "Value for key4 in parent" // Both key4 returned
}
*/

Answer 2

When using JSON.stringify, it's important to include all the data you want returned. Just specifying 'actor' alone is not sufficient.

To achieve the desired result, use:

JSON.stringify(hero, ['fullName', 'actor', 'actorId'])

UPDATE

I conducted some experimentation to explore the scenario where actorId exists both within the actor object and the parent object. Here's what I discovered.

JSON.stringify() outputs both instances of actorId when present in both the actor object and the parent object. To customize this behavior, a more intricate function needs to be created and passed to JSON.stringify() as outlined here

Below are some examples:

var json = {
    key1: "Value for key1 in parent",
    key2: {
        key3: "Value for key3 in child",
        key4: "Value for key4 in child"
    },
    key4: "Value for key4 in parent"
}

var out1 = JSON.stringify(json, ['key1', 'key3'])
/*
out1 = {
    key1: "Value for key1 in parent"
} // No key3!
*/


var out2 = JSON.stringify(json, ['key1', 'key2', 'key3'])
/*
out2 = {
    key1: "Value for key1 in parent",
    key2: {
        key3: "Value for key3 in child"
    }
}
*/

var out3 = JSON.stringify(json, ['key1', 'key2', 'key3', 'key4'])
/*
out3 = {
    key1: "Value for key1 in parent",
    key2: {
        key3: "Value for key3 in child",
        key4: "Value for key4 in child" // Both key4 returned
    },
    key4: "Value for key4 in parent" // Both key4 returned
}
*/

Answer 3

Answer №2

Utilizing Spread in object literals can greatly simplify our code

Consider constructing the Object in this manner:

const obj = {yourObj.fullname, yourObj.actor}
const yourAnswer = JSON.stringify(obj)

For further information, you may visit Spread_syntax

Given that JSON.stringify can be inefficient with large objects, it is recommended to utilize the method outlined above

Answer 4

Utilizing Spread in object literals can greatly simplify our code

Consider constructing the Object in this manner:

const obj = {yourObj.fullname, yourObj.actor}
const yourAnswer = JSON.stringify(obj)

For further information, you may visit Spread_syntax

Given that JSON.stringify can be inefficient with large objects, it is recommended to utilize the method outlined above

The replacer argument of the JSON.stringify method doesn't seem to work properly when dealing with nested objects

Answer №1

Answer №2

Similar questions

Leverage jsencrypt in Ionic 3

What are the best practices for incorporating an ASP variable into Javascript code?

What could be the reason for the Javascript function failing to run?

Concealing functions within Accessors

An issue occurred with npm resulting in exit code 2. The error is as follows: Command was unsuccessful: node_modules/.bin/vsce package --no

When using Javascript, an error is being thrown when attempting to select a nested element, stating that it is not a function

The inner HTML functionality in Angular 2 seems to be malfunctioning when dealing with HTML tags

What should be placed in the viewRef: MapViewNativeComponentType parameter when utilizing React Native Maps in the current.fitToSuppliedMarkers function?

Expand the scope of the javascript in your web application to cater

A function designed to detect errors based on the parameters supplied as arguments

Expanding one type by utilizing it as an extension of another type

What are the steps for implementing a equirectangular image in WebXR with three.js?

Is it possible to utilize a TypeScript type in conjunction with io-ts?

An in-depth guide on implementing Highcharts.Tooltip functionality in a TypeScript environment

What is the proper way to implement v-model with Vuex in <select> elements?

What is causing the TypeError in Discord.js when trying to read the 'voice' property? Any help troubleshooting this issue would be greatly appreciated

The Angular @HostListener beforeunload Event is a powerful way to handle

Troubleshooting TypeScript errors related to ReactNode post-upgrade to Create React App v5

Automatically fill in an input field with jQuery by using the value from another input field

How to Override Certificate Expiry in JavaScript