Javascript compare 2 array of objects and assign value from one o-CodePudding

I have an array of objects in the below format.

let selectedCols = 
[
 {
 "table" :
     { 
      "id" : "bafc1af7-e2c5-ec11-a7b6-00224818a168",
      "name" : "test1"
     }
     visible : true
     trueCol : 1
},
{
 "table" :
     { 
      "id" : "cdep1af7-e4c5-ec11-a7b6-00224818a198",
      "name" : "test2"
     }
     visible : true
     trueCol : 2
}
]

I am creating a copy of the above object in my code and modifying its visible property in the copied object

let copyOfSelectedColsObj = JSON.parse(JSON.stringify(selectedCols ));
copyOfSelectedColsObj.forEach(column => column.visible = false);

Now i only want to copy the value of 'visible' property from copyOfSelectedColsObj back in to my original object wherever the id field is matching.How can i achieve this?

I am quite new to javascript and can't figure out this. Any help would be appreciated

CodePudding user response：

You said wherever the id field is matching, since copied object is replica of original object, don't you think every id would match hence you can set all visible properties to false.

CodePudding user response：

I will suggest to loop one array inside another loop, but only for small arrays.

something like this:

let newSelectedCols = selectedCols.map((i) => {
  return {
    ...i,
    visible: copyOfSelectedColsObj.find(
               (j) => j.table.id === i.table.id
             )?.visible,
  };
});

The map will iterate over the original and for each element it will look for the item with the same table.id and (if exists) it will copy the "visible" value.

CodePudding user response：

selectedCols.forEach((column,i) => {
    if(column.table.id===copyOfSelectedColsObj[i].table.id) {
       column.visible = copyOfSelectedColsObj[i].visible;       
    }
})

CodePudding user response：

You can use forEach again to iterate over the original array (selectedCols), when it finds the current element id in the array (copyOfSelectedColsObj), replace its attribute(visible).

let selectedCols = [{table:{id:"bafc1af7-e2c5-ec11-a7b6-00224818a168",name:"test1"},visible:true,trueCol:1},{table:{id:"cdep1af7-e4c5-ec11-a7b6-00224818a198",name:"test2"},visible:true,trueCol:2}];

let copyOfSelectedColsObj = JSON.parse(JSON.stringify(selectedCols));

const overwrite = () => {
  selectedCols.forEach(column => {  
    // Get the current element id
    const tableId = column?.table?.id;
    // If the current element id does not exist, no processing is required
    if (tableId) {
      // Find element matching element id from target array
      const filtered = selectedCols.filter(c => c?.table?.id == tableId);
      // When the element is found, replace the visible attribute
      if (filtered.length > 0) {
        column['visible'] = filtered[0]['visible'];
      }
    }
    return column;
  });
}

// Replace all visible with false
copyOfSelectedColsObj.forEach(column => column.visible = false);

overwrite();
console.log('Replace all visible with false', copyOfSelectedColsObj);

// Replace one of the visible with true
copyOfSelectedColsObj[0]['visible'] = true;

overwrite();
console.log('Replace one of the visible with true', copyOfSelectedColsObj);