How to remove a item from one object and then add that item to another object of same array in javascript?

UpasanaChauhan
September 24, 2023
236 views
0 votes
2 Answers

I want to remove an item from one object and then add that item to another object of the same array in JavaScript. In the following array, I want to remove 2163 item from column-1 object. and then add 2163 to column-2 itemids.

[
{
    "id": "column-1",
    "title": "New",
    "itemIds": [
        "2163",
        "3477",
        "9639"
    ]
},
{
    "id": "column-2",
    "title": "Active",
    "itemIds": [
        "6018",
        "7028",
        "4491"
    ]
},
{
    "id": "column-3",
    "title": "Resolved",
    "itemIds": [
        "9156"
    ]
},
{
    "id": "column-4",
    "title": "Closed",
    "itemIds": [
        "3773",
        "6317",
        "6868"
    ]
}
]

I tried the following code

        let activeitemId = 2163;
        let truncatedvalue= columns[indexOfactiveColumn].itemIds.filter(function(e) { 
        return e !== activeitemId })
   
        let addedvalue =    [...columns[indexOfoverColumn].itemIds,activeitemId];
         const label = 'itemIds';
        const newValue = truncatedvalue;
        const addednewvalue = addedvalue;
        const updatedArray = [
          ...columns.slice(0, indexOfactiveColumn),
        {  
            ...columns[indexOfactiveColumn],
            [label]: newValue,
         
        },
          ...columns.slice(indexOfactiveColumn + 1),
         

        ];

        console.log('columnall-updatedArray',updatedArray);

Tags: arrays javascript

Answers

const columns = [
    {
        "id": "column-1",
        "title": "New",
        "itemIds": [
            "2163",
            "3477",
            "9639"
        ]
    },
    {
        "id": "column-2",
        "title": "Active",
        "itemIds": [
            "6018",
            "7028",
            "4491"
        ]
    },
    {
        "id": "column-3",
        "title": "Resolved",
        "itemIds": [
            "9156"
        ]
    },
    {
        "id": "column-4",
        "title": "Closed",
        "itemIds": [
            "3773",
            "6317",
            "6868"
        ]
    }
];

const itemIdToRemove = "2163";

// Find the index of the item in column-1 and remove it
const col1 = columns.find(col => col.id === "column-1");
const index = col1.itemIds.indexOf(itemIdToRemove);
if (index !== -1) {
    col1.itemIds.splice(index, 1);
}

// Add the item to column-2
const col2 = columns.find(col => col.id === "column-2");
col2.itemIds.push(itemIdToRemove);

console.log(columns);

Map the column array into an updated one while adding or filtering out the active item id:

const activeitemId = '2163';
const indexOfoverColumn = 1;

const updatedArray = columns.map(({itemIds, ...item}, i) => ({
  ...item, 
  itemIds: i === indexOfoverColumn  ? [...itemIds, activeitemId] : itemIds.filter(id => id !== activeitemId)
}));
  
console.log(updatedArray);

<script> const columns = 
[
{
    "id": "column-1",
    "title": "New",
    "itemIds": [
        "2163",
        "3477",
        "9639"
    ]
},
{
    "id": "column-2",
    "title": "Active",
    "itemIds": [
        "6018",
        "7028",
        "4491"
    ]
},
{
    "id": "column-3",
    "title": "Resolved",
    "itemIds": [
        "9156"
    ]
},
{
    "id": "column-4",
    "title": "Closed",
    "itemIds": [
        "3773",
        "6317",
        "6868"
    ]
}
]
</script>

If your ove column is the same as the active one you can do more safe code and allow to drag items in the same column to the bottom of the items:

const activeitemId = '2163';
const indexOfoverColumn = 1;

const updatedArray = columns.map(({itemIds, ...item}, i) => ({
  ...item, 
  itemIds: itemIds.filter(id => id !== activeitemId).concat(i === indexOfoverColumn ? [activeitemId] : [])
}));
  
console.log(updatedArray);

<script> const columns = 
[
{
    "id": "column-1",
    "title": "New",
    "itemIds": [
        "2163",
        "3477",
        "9639"
    ]
},
{
    "id": "column-2",
    "title": "Active",
    "itemIds": [
        "6018",
        "7028",
        "4491"
    ]
},
{
    "id": "column-3",
    "title": "Resolved",
    "itemIds": [
        "9156"
    ]
},
{
    "id": "column-4",
    "title": "Closed",
    "itemIds": [
        "3773",
        "6317",
        "6868"
    ]
}
]
</script>

Please signup or login to give your own answer.

Click here to cancel reply.