Compare two array object and remove values

Question

I have two arrays with objects in it which looks similar to:

let comp1 = [
    { optionKey: 'option1', displayName: '' },
    { optionKey: 'option2', displayName: '' },
    { optionKey: 'option3', displayName: '' },
    { optionKey: 'option4', displayName: '' },
    { optionKey: 'option5', displayName: '' },
    { optionKey: 'option6', displayName: '' },
    { optionKey: 'option7', displayName: '' },
  ];
let comp2 = [
    { option1Options: [] },
    { option2Options: [] },
    { option3Options: ['On', 'Off'] },
    { option4Options: ['Auto ', 'Off'] },
    { option5Options: [] },
    { option6Options: [] },
  ];

What I wanted to do was, if the value of each key in comp2's length in 0, I want to remove that key without Option index removed from comp1. So far, I was able to do is if each array has equal length

let comp1 = [
    { optionKey: 'option1', displayName: '' },
    { optionKey: 'option2', displayName: '' },
    { optionKey: 'option3', displayName: '' },
    { optionKey: 'option4', displayName: '' },
    { optionKey: 'option5', displayName: '' },
    { optionKey: 'option6', displayName: '' },
    { optionKey: 'option7', displayName: '' },
  ];
let comp2 = [
    { option1Options: [] },
    { option2Options: [] },
    { option3Options: ['On', 'Off'] },
    { option4Options: ['Auto ', 'Off'] },
    { option5Options: [] },
    { option6Options: [] },
  ];
  
comp1.forEach(function (item) {
    var index = comp2.findIndex(function (item2, i) {
        return item2[item.optionKey + 'Options'] !== undefined;
    });
    if (index !== -1) {
        if (comp2[index][item.optionKey + 'Options'].length === 0) {
            comp1.splice(index, 1);
        }
    }
});

console.log(comp1)

But in my case comp1 and comp2 length are different. How should I remove it by the key's value in comp1? Any help on this is apricated.

pilchard · Accepted Answer · 2022-09-16 02:23:36Z

1

You can simply filter() comp1 using a some() call to check if any options arrays exist in comp2. Here using optional chaining to avoid nonexistent elements in comp2

let comp1 = [{ optionKey: 'option1', displayName: '' }, { optionKey: 'option2', displayName: '' }, { optionKey: 'option3', displayName: '' }, { optionKey: 'option4', displayName: '' }, { optionKey: 'option5', displayName: '' }, { optionKey: 'option6', displayName: '' }, { optionKey: 'option7', displayName: '' },];
let comp2 = [{ option1Options: [] }, { option2Options: [] }, { option3Options: ['On', 'Off'] }, { option4Options: ['Auto ', 'Off'] }, { option5Options: [] }, { option6Options: [] },];

const result = comp1.filter(o =>
  comp2.some(option => option[`${o.optionKey}Options`]?.length > 0)
);

console.log(result);

answered Sep 16, 2022 at 2:23

pilchard

13.1k5 gold badges14 silver badges27 bronze badges

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

Comments

Robby Cornelissen · Accepted Answer · 2022-09-16 02:23:47Z

I think a simple combination of filter() and some() should get you there:

const comp1 = [
  { optionKey: 'option1', displayName: '' },
  { optionKey: 'option2', displayName: '' },
  { optionKey: 'option3', displayName: '' },
  { optionKey: 'option4', displayName: '' },
  { optionKey: 'option5', displayName: '' },
  { optionKey: 'option6', displayName: '' },
  { optionKey: 'option7', displayName: '' },
];

const comp2 = [
  { option1Options: [] },
  { option2Options: [] },
  { option3Options: ['On', 'Off'] },
  { option4Options: ['Auto ', 'Off'] },
  { option5Options: [] },
  { option6Options: [] },
];

const result = comp1.filter(({optionKey}) => comp2.some(v => v[`${optionKey}Options`]?.length));

console.log(result);

CertainPerformance · Accepted Answer · 2022-09-16 02:24:48Z

You're splicing the array you're iterating over inside the forEach, which results in the array skipping the next element. For example, if you had items 1-2-3-4-5-6, and the test being performed would mean that all should be removed, you'd first remove 1, skip 2, remove 3, skip 4, remove 5, and skip 6.

While it would be possible to refactor so that the indices aren't creating this problem (such as a for loop), a better approach would be to iterate fully through comp2 first, identify the options to remove, then call .filter on comp1.

let comp1 = [
    { optionKey: 'option1', displayName: '' },
    { optionKey: 'option2', displayName: '' },
    { optionKey: 'option3', displayName: '' },
    { optionKey: 'option4', displayName: '' },
    { optionKey: 'option5', displayName: '' },
    { optionKey: 'option6', displayName: '' },
    { optionKey: 'option7', displayName: '' },
  ];
let comp2 = [
    { option1Options: [] },
    { option2Options: [] },
    { option3Options: ['On', 'Off'] },
    { option4Options: ['Auto ', 'Off'] },
    { option5Options: [] },
    { option6Options: [] },
  ];
  
const optionsToRemove = comp2
  .filter(obj => !Object.values(obj)[0].length)
  .map(obj => Object.keys(obj)[0].replace(/Options$/, ''));
const output = comp1.filter(
  ({ optionKey }) => !optionsToRemove.includes(optionKey)
);
console.log(output);

Collectives™ on Stack Overflow

Compare two array object and remove values

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related