Compare two array of objects and update element in main array - JS

Question

I have an array of objects (main array) and a filtered list. They have a selected property which has a value of true. I need to compare both of them and update the selected property to false if it is not present in the other array.

This is my implementation.

const data = [{
    color: "red",
    value: "#f00",
    selected: true
  },
  {
    color: "green",
    value: "#0f0",
    selected: true
  },
  {
    color: "blue",
    value: "#00f",
    selected: true
  },
  {
    color: "cyan",
    value: "#0ff",
    selected: true
  },
  {
    color: "magenta",
    value: "#f0f",
    selected: true
  },
  {
    color: "yellow",
    value: "#ff0",
    selected: true
  },
  {
    color: "black",
    value: "#000",
    selected: true
  }
]

const filtered = [{
  color: "magenta",
  value: "#f0f",
  selected: true
}, {
  color: "green",
  value: "#0f0",
  selected: true
}, {
  color: "black",
  value: "#000",
  selected: true
}]

data.forEach(item => {
	for(var key in filtered) {
  	if(filtered[key]['value'] === item.value) {
    	item.selected = false
    }
  }
})

console.log(data)

The expected output should be opposite of that.

    [
      {
        "color": "red",
        "value": "#f00",
        "selected": false
      },
      {
        "color": "green",
        "value": "#0f0",
        "selected": true
      },
      {
        "color": "blue",
        "value": "#00f",
        "selected": false
      },
      {
        "color": "cyan",
        "value": "#0ff",
        "selected": false
      },
      {
        "color": "magenta",
        "value": "#f0f",
        "selected": true
      },
      {
        "color": "yellow",
        "value": "#ff0",
        "selected": false
      },
      {
        "color": "black",
        "value": "#000",
        "selected": true
      }
    ]

Please advice. Is there a more better to achieve this?

P.S: I can use lodash as well.

Thanks.

Do you intend to compare based on value, or based on a combination of color and value? — Terry
– Terry, Commented Jul 19, 2019 at 10:58
In my exact scenario, it will be based on a id, but I used value just for this data — arunmmanoharan
– arunmmanoharan, Commented Jul 19, 2019 at 11:01

Terry · Accepted Answer · 2019-07-19 11:37:53Z

1

You can create an array containing the values from the filtered array, and then iterate through your main data array and see if individual items contains values in the filtered array:

const filteredValues = filtered.map(item => item.value);
data.forEach(item => {
  item.selected = filteredValues.includes(item.value);
});

The advantage of this method is that you get rid of doing nested iterations (basically O(n^2) complexity).

const data = [{
    color: "red",
    value: "#f00",
    selected: true
  },
  {
    color: "green",
    value: "#0f0",
    selected: true
  },
  {
    color: "blue",
    value: "#00f",
    selected: true
  },
  {
    color: "cyan",
    value: "#0ff",
    selected: true
  },
  {
    color: "magenta",
    value: "#f0f",
    selected: true
  },
  {
    color: "yellow",
    value: "#ff0",
    selected: true
  },
  {
    color: "black",
    value: "#000",
    selected: true
  }
]

const filtered = [{
  color: "magenta",
  value: "#f0f",
  selected: true
}, {
  color: "green",
  value: "#0f0",
  selected: true
}, {
  color: "black",
  value: "#000",
  selected: true
}]

const filteredValues = filtered.map(item => item.value);
data.forEach(item => {
  item.selected = filteredValues.includes(item.value);
})

console.log(data)

edited Jul 19, 2019 at 11:37

answered Jul 19, 2019 at 10:59

Terry

66.7k16 gold badges107 silver badges127 bronze badges

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

2 Comments

arunmmanoharan Over a year ago

Hey Terry, I need to have true for all the one's in the filtered list and false which are not in the filtered list.

Terry Over a year ago

@a2441918 My bad. Updated my answer ;)

Sami Ahmed Siddiqui · Accepted Answer · 2019-07-19 11:18:22Z

How about to add foreach and check the item with filtered array as shown here:

const data = [{
    color: "red",
    value: "#f00",
    selected: true
  },
  {
    color: "green",
    value: "#0f0",
    selected: true
  },
  {
    color: "blue",
    value: "#00f",
    selected: true
  },
  {
    color: "cyan",
    value: "#0ff",
    selected: true
  },
  {
    color: "magenta",
    value: "#f0f",
    selected: true
  },
  {
    color: "yellow",
    value: "#ff0",
    selected: true
  },
  {
    color: "black",
    value: "#000",
    selected: true
  }
]

const filtered = [{
  color: "magenta",
  value: "#f0f",
  selected: true
}, {
  color: "green",
  value: "#0f0",
  selected: true
}, {
  color: "black",
  value: "#000",
  selected: true
}];
var filteredData = [];

data.forEach(item => {
    var isSelected = 0;
    filtered.forEach(filterItem => {
        if(item.value === filterItem.value) {
            isSelected = 1;
        }
    });
  
    if (isSelected == 0) {
        item.selected = false;
    }
    filteredData.push(item); 
});

console.log(filteredData)

Pouya · Accepted Answer · 2019-07-19 11:18:53Z

Based on your requirement as soon as you find a match you should set the selected value to true. Then you should break out of the loop. Moreover, if the object from the data list is not present in the filtered list you should set its selected to false.

const data = [{
    color: "red",
    value: "#f00",
    selected: true
  },
  {
    color: "green",
    value: "#0f0",
    selected: true
  },
  {
    color: "blue",
    value: "#00f",
    selected: true
  },
  {
    color: "cyan",
    value: "#0ff",
    selected: true
  },
  {
    color: "magenta",
    value: "#f0f",
    selected: true
  },
  {
    color: "yellow",
    value: "#ff0",
    selected: true
  },
  {
    color: "black",
    value: "#000",
    selected: true
  }
]

const filtered = [{
  color: "magenta",
  value: "#f0f",
  selected: true
}, {
  color: "green",
  value: "#0f0",
  selected: true
}, {
  color: "black",
  value: "#000",
  selected: true
}]

data.forEach(item => {
	for(var key in filtered) {
  	if(filtered[key]['value'] === item.value) {
    	item.selected = true;
      break;
    }
    else {
      item.selected = false;
    
  }
  }
})

console.log(data)

Collectives™ on Stack Overflow

Compare two array of objects and update element in main array - JS

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related