Remove json element - JavaScript?

In JavaScript, you can remove elements from JSON objects or arrays using different methods. This article demonstrates how to remove properties from JSON objects and elements from JSON arrays.

Sample JSON Data

Let's work with the following JSON array containing customer information:

var details = [
    {
        customerName: "Chris",
        customerAge: 32
    },
    {
        customerName: "David",
        customerAge: 26
    },
    {
        customerName: "Bob",
        customerAge: 29
    },
    {
        customerName: "Carol",
        customerAge: 25
    }
];
console.log("Original data:", details);

Original data: [
  { customerName: 'Chris', customerAge: 32 },
  { customerName: 'David', customerAge: 26 },
  { customerName: 'Bob', customerAge: 29 },
  { customerName: 'Carol', customerAge: 25 }
]

Method 1: Using delete Keyword

Use the delete keyword to remove a specific property from a JSON object:

var details = [
    {
        customerName: "Chris",
        customerAge: 32
    },
    {
        customerName: "David",
        customerAge: 26
    },
    {
        customerName: "Bob",
        customerAge: 29
    },
    {
        customerName: "Carol",
        customerAge: 25
    }
];

// Remove customerAge property from first object
delete details[0].customerAge;
console.log("After deleting customerAge from first object:", details);

After deleting customerAge from first object: [
  { customerName: 'Chris' },
  { customerName: 'David', customerAge: 26 },
  { customerName: 'Bob', customerAge: 29 },
  { customerName: 'Carol', customerAge: 25 }
]

Method 2: Removing Array Elements

To remove entire objects from the JSON array, use array methods like splice():

var details = [
    {
        customerName: "Chris",
        customerAge: 32
    },
    {
        customerName: "David",
        customerAge: 26
    },
    {
        customerName: "Bob",
        customerAge: 29
    },
    {
        customerName: "Carol",
        customerAge: 25
    }
];

// Remove the second object (index 1)
details.splice(1, 1);
console.log("After removing second object:", details);

After removing second object: [
  { customerName: 'Chris', customerAge: 32 },
  { customerName: 'Bob', customerAge: 29 },
  { customerName: 'Carol', customerAge: 25 }
]

Method 3: Using filter() Method

For conditional removal based on property values, use the filter() method:

var details = [
    {
        customerName: "Chris",
        customerAge: 32
    },
    {
        customerName: "David",
        customerAge: 26
    },
    {
        customerName: "Bob",
        customerAge: 29
    },
    {
        customerName: "Carol",
        customerAge: 25
    }
];

// Remove customers older than 30
var filteredDetails = details.filter(customer => customer.customerAge <= 30);
console.log("Customers aged 30 or younger:", filteredDetails);

Customers aged 30 or younger: [
  { customerName: 'David', customerAge: 26 },
  { customerName: 'Bob', customerAge: 29 },
  { customerName: 'Carol', customerAge: 25 }
]

Comparison

Conclusion

Use delete for removing object properties, splice() for removing array elements by index, and filter() for conditional removal. Choose the method based on your specific removal requirements.