Find/Replace object in an array and add a key Javascript

Question

I am trying to add a key to an Object of Array as isActive: true, and then I want to find the object in the actual array with the same label as that of selectedFilterList and replace it in this.bindingData else add isActive: false

if (this.selectedFilterList && this.selectedFilterList.length) {
    //Do something
} else {
    this.bindingData = this.data.map((value) => {
        var newKey = Object.assign({}, value);
        newKey.isActive = false;
        return newKey;
    });
}

this.data = [
    { label: "Audi", value: "Audi" },
    { label: "BMW", value: "BMW" },
    { label: "Fiat", value: "Fiat" },
    { label: "Honda", value: "Honda" },
    { label: "Jaguar", value: "Jaguar" },
    { label: "Mercedes", value: "Mercedes" },
    { label: "Renault", value: "Renault" },
    { label: "VW", value: "VW" },
    { label: "Volvo", value: "Volvo" },
];

this.selectedFilterList = [
    { label: "Audi", value: "Audi", isActive: true },
    { label: "Fiat", value: "Fiat", isActive: true },
    { label: "BMW", value: "BMW", isActive: true },
];

I have tried this which is working but i don't think so its a best approach

if (this.selectedFilterList && this.selectedFilterList.length) {
            this.bindingData = this.data.map(value => {
                var newKey = Object.assign({}, value);
                newKey.isActive = false;
                return newKey;
            });
            this.bindingData.map(data => {
                this.selectedFilterList.forEach(value => {
                    if (value.label == data.label) {
                        data.isActive = value.isActive;
                    }
                });
            });
        } else {
            this.bindingData = this.data.map(value => {
                var newKey = Object.assign({}, value);
                newKey.isActive = false;
                return newKey;
            });
        }

Pranay Binju · Accepted Answer · 2021-07-14 11:43:59Z

1

You can use Array.prototype.reduce() on data, check if each item in data is present in selectedFilterList using Array.prototype.some() and add isActive flag value accordingly. Here is the sample code:

var bindingData = data.reduce((acc,datum)=>{
    if(selectedFilterList.some((item,index)=>(item.value === datum.value))){
     return acc.concat({...datum,isActive:true});   
}

return acc.concat({...datum,isActive:false});

},[]);

answered Jul 14, 2021 at 11:43

Pranay Binju

6212 gold badges7 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Juhi Shaw Over a year ago

Is there a way to set isActive: false for all the object on a click and update the same on UI?

Pranay Binju Over a year ago

In that case, you can create a click handler, and use Array.prototype.map() on bindingData and set isActive to false for each item in bindingData. Like bindingData = bindingData.map((datum)=>({...datum, isActive:false}));

Juhi Shaw Over a year ago

This sets the value to false but doesn't update the array on the UI

Pranay Binju Over a year ago

I hope you are reassigning it to bindingData

Pranay Binju Over a year ago

May I know which library/framework you are using? As bindingData needs to be bind to UI element. Or maybe share a simple sandbox for it?

|

Sajeeb Ahamed · Accepted Answer · 2021-07-14 11:33:32Z

1

Simply loop through the data array and search if an item matches with the label of the selectedFilterList array then assign a property isActive to the item as true or the same as the selectedFilterList item. Otherwise set isActive to false.

this.data=[{label:"Audi",value:"Audi"},{label:"BMW",value:"BMW"},{label:"Fiat",value:"Fiat"},{label:"Honda",value:"Honda"},{label:"Jaguar",value:"Jaguar"},{label:"Mercedes",value:"Mercedes"},{label:"Renault",value:"Renault"},{label:"VW",value:"VW"},{label:"Volvo",value:"Volvo"}];
this.selectedFilterList=[{label:"Audi",value:"Audi",isActive:true},{label:"Fiat",value:"Fiat",isActive:true},{label:"BMW",value:"BMW",isActive:true}];

for (const item of data) {
  const found = this.selectedFilterList.find(val => val.label === item.label);
  if (found) {
    item.isActive = found.isActive;
  } else {
    item.isActive = false;
  }
}

console.log(this.data);

.as-console-wrapper {min-height: 100%!important; top: 0}

answered Jul 14, 2021 at 11:33

Sajeeb Ahamed

6,4382 gold badges23 silver badges36 bronze badges

5 Comments

Juhi Shaw Over a year ago

Is there a way to set isActive: false for all the object on a click and update the same on UI?

Sajeeb Ahamed Over a year ago

Are you using any JavaScript library like (React/Vue/Angular) for rendering the UI?

Juhi Shaw Over a year ago

I am using Angular

Sajeeb Ahamed Over a year ago

I am not expert in AngularJS, but you should share the angular code where it's not working.

Juhi Shaw Over a year ago

Got the issue, its working now. Thanks for the help

Terry Lennox · Accepted Answer · 2021-07-14 11:38:49Z

We can use this.data.map to create the bindingData array, setting isActive to the corresponding value if the label is present in selectedFilterList and false if not.

this.data = [
        { label: 'Audi', value: 'Audi' },
        { label: 'BMW', value: 'BMW' },
        { label: 'Fiat', value: 'Fiat' },
        { label: 'Honda', value: 'Honda' },
        { label: 'Jaguar', value: 'Jaguar' },
        { label: 'Mercedes', value: 'Mercedes' },
        { label: 'Renault', value: 'Renault' },
        { label: 'VW', value: 'VW' },
        { label: 'Volvo', value: 'Volvo' },
    ];

this.selectedFilterList = [
    {label: "Audi", value: "Audi", isActive: true},
    {label: "Fiat", value: "Fiat", isActive: true},
    {label: "BMW", value: "BMW", isActive: true},
    {label: "Volvo", value: "Volvo", isActive: false}
]

if (this.selectedFilterList && this.selectedFilterList.length) {
    this.bindingData = this.data.map(value => {
        const isActive = !!this.selectedFilterList.find(f => f.label === value.label)?.isActive;
        return { ...value, isActive };
    });
} else {
    this.bindingData = this.data.map(value => {
        var newKey = Object.assign({}, value);
        newKey.isActive = false;
        return newKey;
    });
}

console.log(this.bindingData)

Collectives™ on Stack Overflow

Find/Replace object in an array and add a key Javascript

3 Answers 3

8 Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related