Question 251591 in Javascript Question posted in
A very good W3school tutorial can be found here.

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

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:

2

Answers


  1. 0 
    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);
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search