Update Array of Objects based on Array of strings

I am trying to update an array of objects. The active key will be set to true based on user's selection or the array of strings.

For an instance, on selecting ABC, DEF, the active key will be set to true for these two Ids.

const defaultArray = [
  {
    "active": true,
    "id": 1,
    "name": "ABC",
    "value": "1"
  },
  {
    "active": true,
    "id": 2,
    "name": "DEF",
    "value": "2"
  },
  {
    "active": true,
    "id": 3,
    "name": "GHI",
    "value": "3"
  }
]

const selectedArray = [
  "ABC",
  "DEF"
]

So now I need to create a new Array based on the default array and assign active=true only for array of string in selecetedArray.

Result will look like

const newArray = [
  {
    "active": true,
    "id": 1,
    "name": "ABC",
    "value": "1"
  },
  {
    "active": true,
    "id": 2,
    "name": "DEF",
    "value": "2"
  },
  {
    "active": false,
    "id": 3,
    "name": "GHI",
    "value": "3"
  }
]

I tried.

const arrCopy = [...defaultArray]
arrCopy.forEach(x => x.active = false)
arrCopy.forEach(x => {
    if(selectedArray.includes(x.name))
        x.active =  true
})

console.log(arrCopy)

The above code works, but is there any more standard way to achieve the same. thanks

You don't need two loops to achieve that, you can directly use map method on the defaultArray.

defaultArray.map(x => ({...x, active: selectedArray.includes(x.name)}))

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const defaultArray = [
  {
    "active": true,
    "id": 1,
    "name": "ABC",
    "value": "1"
  },
  {
    "active": true,
    "id": 2,
    "name": "DEF",
    "value": "2"
  },
  {
    "active": true,
    "id": 3,
    "name": "GHI",
    "value": "3"
  }
]
const selectedArray = [
  "ABC",
  "DEF"
]

const newArray = defaultArray.map(x => ({...x, active: selectedArray.includes(x.name)}))

console.log(newArray)

<!-- end snippet -->

You can simply iterate through your array of objects & see if selectedArray includes the specified name attribute from each object and set the result to active flag, like the following -

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const defaultArray = [
  {
    "active": true,
    "id": 1,
    "name": "ABC",
    "value": "1"
  },
  {
    "active": true,
    "id": 2,
    "name": "DEF",
    "value": "2"
  },
  {
    "active": true,
    "id": 3,
    "name": "GHI",
    "value": "3"
  }
];

const selectedArray = [
  "ABC",
  "DEF"
];

const arrCopy = [...defaultArray];
arrCopy.forEach(x => x.active =  selectedArray.includes(x.name));

console.log(arrCopy);

<!-- end snippet -->

first you can remove this line :

arrCopy.forEach(x => x.active = false)

and do it like this :

arrCopy.forEach(x => {
    if(selectedArray.includes(x.name)){
        x.active =  true}
    else{
       x.active =  false
     }    
})

you can write a function to do achieve that goal if this piece would be repeated in your code

Adding new arguments to the checkActivefunction will check in the object if the name exists.

The function is:

function checkActive(...args){
    return  newArray.map(obj=>{
         if(args.includes(obj.name)){
              obj.active = true
         }else{
              obj.active = false
         }
        return obj
      })

}
console.log(checkActive("ABC","DEF"))