Delete a key-value pair from a JSON object in Angular

Question

Delete a key-value pair from a JSON object in Angular

I need to manipulate a JSON response by removing specific object key values and storing the edited response separately for later use. While I know how to do this in simple JavaScript, I am unfamiliar with how to achieve this using AngularJS.

Json response

{
    "$id": "1",
    "XYZ": [],
    "ABC": [
        {
            "$id": "41",
            "ID": 1,
            "Order": 0,
            "Delay": 0,
            "Name": "abc",
            "Count": "9",
            "Storage": 3,
            "Groups": []
        }
    ],
    "Projected": 2019
}

I want to filter out the following key values from this JSON file:

"$id": "41","ID": 1,"Order": 0, "Delay": 0, "Groups": [], "Name": "abc"

The structure of the new JSON that I wish to store should be:

{
    "$id": "1",
    "XYZ": [],
    "ABC": [
        {
            "Count": "9",
            "Storage": 3
        }
    ],
    "Projected": 2019
}

Is there a method to achieve this using AngularJS?

javascript angularjs json

Answer 1

Answer №1

Forget about fancy angular tricks, plain old JavaScript will do the job just fine. My method goes through each item in the ABC array and removes all properties specified in the props array. Keep in mind that this actively alters the properties of the ABC array items.

const obj = {
    "$id": "1",
    "XYZ": [],
    "ABC": [
        {
            "$id": "41",
            "ID": 1,
            "Order": 0,
            "Delay": 0,
            "Name": "abc",
            "Count": "9",
            "Storage": 3,
            "Groups": []
        }
    ],
    "Projected": 2019
}

// Now I want to filter out certain properties from this JSON object

const props = ["$id", "ID", "Order", "Delay", "Groups", "Name"];
props.forEach(prop => {
    obj.ABC.forEach(abc => {
      delete abc[prop];
    });
});

console.log(obj);

Answer 2

Forget about fancy angular tricks, plain old JavaScript will do the job just fine. My method goes through each item in the ABC array and removes all properties specified in the props array. Keep in mind that this actively alters the properties of the ABC array items.

const obj = {
    "$id": "1",
    "XYZ": [],
    "ABC": [
        {
            "$id": "41",
            "ID": 1,
            "Order": 0,
            "Delay": 0,
            "Name": "abc",
            "Count": "9",
            "Storage": 3,
            "Groups": []
        }
    ],
    "Projected": 2019
}

// Now I want to filter out certain properties from this JSON object

const props = ["$id", "ID", "Order", "Delay", "Groups", "Name"];
props.forEach(prop => {
    obj.ABC.forEach(abc => {
      delete abc[prop];
    });
});

console.log(obj);

Answer 3

Answer №2

This approach offers a different solution compared to others. Let's assume we have a variable named json. The following method is straightforward and effective.

let length = json.ABC.length;
for (let index=0; index<length; index++){
    delete json.ABC[index].$id;
    delete json.ABC[index].ID;
    delete json.ABC[index].Order;
    delete json.ABC[index].Delay;
    delete json.ABC[index].Groups;
    delete json.ABC[index].Name;
}

Answer 4

This approach offers a different solution compared to others. Let's assume we have a variable named json. The following method is straightforward and effective.

let length = json.ABC.length;
for (let index=0; index<length; index++){
    delete json.ABC[index].$id;
    delete json.ABC[index].ID;
    delete json.ABC[index].Order;
    delete json.ABC[index].Delay;
    delete json.ABC[index].Groups;
    delete json.ABC[index].Name;
}

Answer 5

Answer №3

Give this code a try:

let data = {
    "$id": "1",
    "XYZ": [],
    "ABC": [
        {
            "$id": "41",
            "ID": 1,
            "Order": 0,
            "Delay": 0,
            "Name": "abc",
            "Count": "9",
            "Storage": 3,
            "Groups": []
        }
    ],
    "Projected": 2019
};

data["ABC"] = data["ABC"].map(obj => ({
  "Count": obj["Count"],
  "Storage": obj["Storage"]
}));
// or in a dynamic way
let keysToKeep = ["Storage", "Count"];
data["ABC"] = data["ABC"].map(obj => {
  let newObj = {};
   keysToKeep.forEach(key => newObj[key] = obj[key]);
  return newObj;
});
console.log(data)

Answer 6

Give this code a try:

let data = {
    "$id": "1",
    "XYZ": [],
    "ABC": [
        {
            "$id": "41",
            "ID": 1,
            "Order": 0,
            "Delay": 0,
            "Name": "abc",
            "Count": "9",
            "Storage": 3,
            "Groups": []
        }
    ],
    "Projected": 2019
};

data["ABC"] = data["ABC"].map(obj => ({
  "Count": obj["Count"],
  "Storage": obj["Storage"]
}));
// or in a dynamic way
let keysToKeep = ["Storage", "Count"];
data["ABC"] = data["ABC"].map(obj => {
  let newObj = {};
   keysToKeep.forEach(key => newObj[key] = obj[key]);
  return newObj;
});
console.log(data)

Delete a key-value pair from a JSON object in Angular

Json response

Answer №1

Answer №2

Answer №3

Similar questions

Altering iframe Content with the Help of Selenium Web Driver

When attempting to run HTML and JavaScript files locally, an error is encountered: "TypeError: The module name 'openai' is not resolving to a valid URL."

Tips for allowing divs to be dragged and resized within table cells and rows

"Looking for a way to eliminate the background of an image on NextJS? Learn

Drawing the canvas is taking place prior to the image being fully loaded in JavaScript

PhpStorm alerts users to potential issues with Object methods within Vue components when TypeScript is being utilized

Issue arises when the value becomes nonexistent following the execution of a

What is the best method for accessing OpenWeatherMap details via JSON?

Error: Headers cannot be set after they have already been sent, resulting in an Unhandled Promise Rejection with rejection id 2

Managing ng-show in AngularJS outside the ng-repeat loop

Having difficulty changing the visibility of a div with Javascript

What steps can I take to make sure the JavaScript runs and updates the images correctly?

ngTable select all data that has been filtered

Issue with AngularJS viewContentLoaded not being triggered during page refresh and initial load when utilizing a directive

Utilizing Jquery to Pass an Optional Function to Another Function

Steps to transforming a standard array into a multidimensional array

Exploring date comparison in AngularJS

Increase value by 1 with the push of a button within two specified ranges using JavaScript

Error occurs during server to server mutation with Apollo Client (query successful)

Uploading to a designated folder using Google Script