How to remove an item from array object in ReactJS

Question

I want to skip/remove an element from array object to display required data only and skip _id One answer is here but needs more detail

How to remove specific key and value from array object in javascript?

[
    {
        _id:"1",
        id:"d8a67aa5-10bd-43bb-be33-5e4219cedaf4",
        title:"Work"
    },
    {
        _id:"2",
        id:"d8a67aa5-10bd-43bb-be33-5e4219cedaf4",
        title:"Work"
    }
]

As you can see above the array object has three element, _id, id and title.

I want to achieve this result

[
    {
        id:"d8a67aa5-10bd-43bb-be33-5e4219cedaf4",
        title:"Work"
    },
    {
        id:"d8a67aa5-10bd-43bb-be33-5e4219cedaf4",
        title:"Work"
    }
]

I do not want to have _id I shall be very thankful

Sam R. It work for me. how I can accept you comment. I searched and there is not specific solution like that you porvided. — ZiaUllahZia, Nov 30 '20 at 19:06
@SamR. can you add it like an answer? this will help many people. — ZiaUllahZia, Nov 30 '20 at 19:07

score 1 · Answer 1 · edited Nov 30 '20 at 19:05

You can use map() over array and remove the prop you want.

I have create a function removeProp() which will remove the any given prop from any array of objects.

const arr = [{
    _id: "1",
    id:"d8a67aa5-10bd-43bb-be33-5e4219cedaf4",
    title:"Work"
},{
    _id: "2",
    id:"d8a67aa5-10bd-43bb-be33-5e4219cedaf4",
    title:"Work"
}]

const removeProp = (arr, prop)=> arr.map(({[prop]:p, ...other}) => other);
console.log(removeProp(arr, "_id"))

score 0 · Answer 2 · answered Nov 30 '20 at 19:09

You can use Object.keys in conjunction w/ Array.prototype.reduce & object spreading to achieve this

const array = [
    {
        _id:"1",
        id:"d8a67aa5-10bd-43bb-be33-5e4219cedaf4",
        title:"Work"
    },
    {
        _id:"2",
        id:"d8a67aa5-10bd-43bb-be33-5e4219cedaf4",
        title:"Work"
    }
]

const createCompactArray = (array, keyToOmit) => array.map(o => Object.keys(o).reduce((o1, k) => (k!==keyToOmit?{ ...o1, [k]: o[k] }:o1), {}))

createCompactArray(array, '_id') // =>

[
    {
        id:"d8a67aa5-10bd-43bb-be33-5e4219cedaf4",
        title:"Work"
    },
    {
        id:"d8a67aa5-10bd-43bb-be33-5e4219cedaf4",
        title:"Work"
    }
]

One of the benefits to this approach (having a re-usable function w/ a dynamic key to omit) is that you can use the same approach regardless of what key you want to omit.

You can even enhance this to accept multiple keys!

const createCompactArrayV2 = (array, keysToOmit = []) => array.map(o => Object.keys(o).reduce((o1, k) => (!keysToOmit.includes(k)?{ ...o1, [k]: o[k] }:o1), {}))

devastro · Answer 3 · 2020-11-30T19:11:11.987

-1

You can just delete the _id field.

arr.forEach((item) => {delete item._id})

edited Nov 30 '20 at 19:11

answered Nov 30 '20 at 19:04

devastro

79
3

Why are you using `map`? – Unmitigated Nov 30 '20 at 19:05
I've updated my code. – devastro Nov 30 '20 at 19:11

How to remove an item from array object in ReactJS

3 Answers3