Ways to eliminate nested properties in JSON.stringify()

Question

Ways to eliminate nested properties in JSON.stringify()

Looking to make alterations to a string using Typescript. The string is generated by the JSON.stringify() function.

I aim to eliminate the attributes "id", "lightStatus", and "value" from both "inputPort" and "outputPort" objects, only keeping their respective "id" property.

console.log(JSON.stringify(this.light));
// Output -> {"id":1,"name":"Light Switch","lightStatus":true,"inputPort":{"id":2,"value":0},"outputPort":{"id":2,"value":false},"resistance":100}

I attempted the following method but encountered issues with "inputPort.id" and "outputPort.id". Below is my attempt and the resultant output:

var savedLight = JSON.stringify(this.light, ["name", "inputPort.id", "outputPort.id", "resistance"]);
// Output -> {"name":"Light Switch","resistance":100}

The desired outcome should consist of the properties "name", "inputPort id", "outputPort id", and "resistance". Like so:

{"name":"Light Switch","inputPort": 2, "outputPort": 2, "resistance":100}

Could use some assistance in removing the unnecessary properties. Any help would be appreciated.

javascript json typescript stringify

Answer 1

Answer №1

One way to customize the output of JSON.stringify is by using a "replacer" function.

var data = {"id":1,"name":"Light Switch","lightStatus":true,"inputPort":{"id":2,"value":0},"outputPort":{"id":2,"value":false},"resistance":100};

var result = JSON.stringify(data, function(k, v) {
    switch (k) {
    case "": case "name": case "resistance":
        return v;
    case "inputPort": case "outputPort":
        return v.id;
    default:
        return undefined;
  }
}, 2)

document.querySelector("pre").textContent = result

<pre></pre>

The "" denotes the top-level object in the JSON. It keeps the original values for properties like "name" and "resistance".

For properties like "inputPort" and "outputPort", it only includes the id value.

All other properties are set to undefined, effectively excluding them from the final result.

Answer 2

One way to customize the output of JSON.stringify is by using a "replacer" function.

var data = {"id":1,"name":"Light Switch","lightStatus":true,"inputPort":{"id":2,"value":0},"outputPort":{"id":2,"value":false},"resistance":100};

var result = JSON.stringify(data, function(k, v) {
    switch (k) {
    case "": case "name": case "resistance":
        return v;
    case "inputPort": case "outputPort":
        return v.id;
    default:
        return undefined;
  }
}, 2)

document.querySelector("pre").textContent = result

<pre></pre>

The "" denotes the top-level object in the JSON. It keeps the original values for properties like "name" and "resistance".

For properties like "inputPort" and "outputPort", it only includes the id value.

All other properties are set to undefined, effectively excluding them from the final result.

Answer 3

Answer №2

To achieve this, you can implement a replacer function.

var object = {
  "id": 1,
  "name": "Light Switch",
  "lightStatus": true,
  "inputPort": {
    "id": 2,
    "value": 0
  },
  "outputPort": {
    "id": 2,
    "value": false
  },
  "resistance": 100
};

var stringifyOutput = JSON.stringify(object, function(key, value) {
  if (key === 'id' || key === 'lightStatus') {
    return void(0);
  }
  if (key === 'inputPort' || key === 'outputPort') {
    return value.id;
  }
  return value;
});

console.log(stringifyOutput);

Answer 4

To achieve this, you can implement a replacer function.

var object = {
  "id": 1,
  "name": "Light Switch",
  "lightStatus": true,
  "inputPort": {
    "id": 2,
    "value": 0
  },
  "outputPort": {
    "id": 2,
    "value": false
  },
  "resistance": 100
};

var stringifyOutput = JSON.stringify(object, function(key, value) {
  if (key === 'id' || key === 'lightStatus') {
    return void(0);
  }
  if (key === 'inputPort' || key === 'outputPort') {
    return value.id;
  }
  return value;
});

console.log(stringifyOutput);

Answer 5

Answer №3

If you want to modify the content of a JSON object before stringifying it, you can use the Replacer function within the JSON.stringify method.

var data='{"id":1,"name":"Light Switch","lightStatus":true,"inputPort":{"id":2,"value":0},"outputPort":{"id":2,"value":false},"resistance":100}';
var json=JSON.parse(data);

function replacer(key, value) {
  switch (key) {
    case "": case "name": case "resistance":
        return value;
    case "inputPort": case "outputPort":
        return value.id;
    default:
        return undefined;
  }
}

console.log(JSON.stringify(json, replacer));

Answer 6

If you want to modify the content of a JSON object before stringifying it, you can use the Replacer function within the JSON.stringify method.

var data='{"id":1,"name":"Light Switch","lightStatus":true,"inputPort":{"id":2,"value":0},"outputPort":{"id":2,"value":false},"resistance":100}';
var json=JSON.parse(data);

function replacer(key, value) {
  switch (key) {
    case "": case "name": case "resistance":
        return value;
    case "inputPort": case "outputPort":
        return value.id;
    default:
        return undefined;
  }
}

console.log(JSON.stringify(json, replacer));

Ways to eliminate nested properties in JSON.stringify()

Answer №1

Answer №2

Answer №3

Similar questions

Executing npm variables dynamically (such as process.env.SERVER) on a Windows system with Cmder - a step-by-step guide

I am experiencing issues with my JavaScript not functioning properly in conjunction with my HTML and CSS. I am uncertain about the root cause of the problem (The console is displaying an error message:

Completing a POST request with comma-separated values or an array for autocomplete functionality

Updating Time by Adding Minutes using ngFor Loop in Angular 4

Loading a local FBX file in Three.js without the need to upload it

Vue: rendering props cannot be utilized with TSX

Is it advisable to pass useSelector to useState in React?

Implementing Javascript to insert IFRAME into the DOM

Solving the Issue of Handling Custom Events in Javascript

Is there a way to print an HTML page in Landscape mode within my Vue.js project?

Discover the method for concealing a button using ng-show and ng-hide directives

Fetching data using Axios from a specified URL

When implementing multer in an express application, I encountered an issue where req.files appeared empty

Show or hide the expand/collapse button based on the height of the container

The reason for duplicating the import of an NPM package in TypeScript (specifically for Firebase Functions)

Utilizing Mootools to Access and Obtain the Current Query String Parameters

What are some effective ways to integrate the WordPress API with ReactJS?

Traverse a dictionary by iterating over its list values

Unable to execute app.get in Express framework of Node.js

Basic demonstration of AngularJS including a module and controller showcased on jsFiddle