Question 174591 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How to modify complex JSON data

I have below JSON data & I need to modify the values or remove some properties.

 {
"actions": {
"canUpdateAbc": true,
"canUpdateXyz": true  
},
"criteria": [
{
  "criteriaType": {
    "code": "CCode",
    "value": "C Code"
  },
  "processType": {
    "code": "PType",
    "value": "C"
  },
  "values": [
    "123456"
  ]
},
{
  "criteriaType": {
    "code": "ACode",
    "value": "A Code"
  },
  "processType": {
    "code": "PType",
    "value": "R"
  },
  "values": [
    "567890"
  ]
}
],
"outcome": {
"code": "create",
"value": "Always create"
},
"unlessCriteria": []
}

& I need to modify processType. i.e processType = undefined or need to remove the property.

Output should be

{
"actions": {
"canUpdateAbc": true,
"canUpdateXyz": true  
},
 "criteria": [
 {
  "criteriaType": {
    "code": "CCode",
    "value": "C Code"
  },      
  "values": [
    "123456"
  ]
},
{
  "criteriaType": {
    "code": "ACode",
    "value": "A Code"
  },     
  "values": [
    "567890"
  ]
}
],
"outcome": {
"code": "create",
"value": "Always create"
},
"unlessCriteria": []
}

I have tried like this..

 const rules = rule.criteria?.map((m) => {
    m.processType = undefined;
    return m;
   });

& Its not working. I get only criteria, not entire JSON data.

How to achieve in Typescript?

Tags:

4

Answers


  1. 0

    Use the spread operator ... to spread the original object. This should work:

    const rules = {
  ...rule,
  criteria: rule.criteria?.map((m) => {
    m.processType = undefined;
    return m;
  }),
};

    You can consider delete m.processType instead of setting it to undefined, if you prefer.

    Alternatively, you can use this if you don’t mind mutating the original object:

    rule.criteria?.forEach((m) => {
    delete m.processType;
})
    Login or Signup to reply.
  2. 0

    Here is an another possible solution

    parse the JSON data into object => Modify processType property within each object in criteria array => convert the modified object back into a JSON string.

     // Parse the JSON data into an object
const jsonData = `{
  "actions": {
    "canUpdateAbc": true,
    "canUpdateXyz": true
  },
  "criteria": [
    {
      "criteriaType": {
        "code": "CCode",
        "value": "C Code"
      },
      "processType": {
        "code": "PType",
        "value": "C"
      },
      "values": [
        "123456"
      ]
    },
    {
      "criteriaType": {
        "code": "ACode",
        "value": "A Code"
      },
      "processType": {
        "code": "PType",
        "value": "R"
      },
      "values": [
        "567890"
      ]
    }
  ],
  "outcome": {
    "code": "create",
    "value": "Always create"
  },
  "unlessCriteria": []
}`;

const parsedData = JSON.parse(jsonData);

// Modify the processType property within each criteria object
if (parsedData.criteria) {
  parsedData.criteria.forEach((criteriaItem: any) => {
    delete criteriaItem.processType;
  });
}

// Convert the modified object back into a JSON string
const modifiedJsonData = JSON.stringify(parsedData, null, 2);

console.log(modifiedJsonData);
    Login or Signup to reply.
  3. 0

    You could also do it this way:(personally, I like the above answer by twharmon)

     rules.criteria = rules.criteria?.map((m) => {
    m.processType = undefined;
    return m;
   });

    Now if you see rules object, criteria will have your required processType. This is because "The map() method creates a new array populated with the results of calling a provided function on every element in the calling array."

    Login or Signup to reply.
  4. 0

    I think what you need is not to reassign the rule value with only the criterias array inside, let’s call your json data is data, you should rewrite your code like below

    const rule = {
  ...data,
  criteria: data.criteria.map((crt) => {
    crt.processType = undefined;
    return crt;
  }),
}

    This code keeps all data property and reassign only criteria array with processType in criteria item has been reassign to undefined. Hope this help !

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search