JavaScript: Comparing arrays of objects with nested array of object

Question

I would like to compare the var arrayB with var arrayA in the said condition as arrayA[n].[m].id will be matched with arrayB[ele].optionValue[e].id.

var arrayA = [
[{value: "#0767b9", id: 162,productId: 1}, value: "#f4b7d4",id: 164,productId: 1],
[{value: "#44acd8",id: 102,productId: 2}],
[{value: "#609923",id: 106,productId: 3}, {value: "#ee3b70",id: 107,productId: 3}]
]

var arrayB = [
    {
        id: 1, 
        optionValue: [{value: "#002e63",id: 161,productId: 1}, {value: "#0767b9",id: 162,productId: 1},{value: "#010b1d",id: 163,productId: 1}, {value: "#f4b7d4",id: 164,productId: 1}]
    },
    {
        id: 2, 
        optionValue: [{value: "#EC7063",id: 93,productId: 2}, {value: "#bf0000",id: 94,productId: 2}, {value: "#44acd8",id: 102,productId: 2}, {value: "#ffdbdb",id: 103,productId: 2}]
    },
    {
        id: 3,
        optionValue: [{value: "#d861bd",id: 105,productId: 3}, {value: "#609923",id: 106,productId: 3}, {value: "#ee3b70",id: 107,productId: 3}]
    },
    {
        id: 4,
        optionValue: [{value: "#44acd8",id: 165,productId: 4}]
    }
]

My goal is to return var arrayB with that filtered data that will remove the object which is not in the var arrayA, like this:

var result = [
    {
        id: 1, 
        optionValue: [{value: "#0767b9",id: 162,productId: 1},{value: "#f4b7d4",id: 164,productId: 1}]
    },
    {
        id: 2, 
        optionValue: [{value: "#44acd8",id: 102,productId: 2}]
    },
    {
        id: 3,
        optionValue: [{value: "#609923",id: 106,productId: 3},{value: "#ee3b70",id: 107,productId: 3}]
    },
    {
        id: 4,
        optionValue: [{value: "#44acd8",id: 165,productId: 4}]
    }
]

I have workaround as below but that is not giving the desired output.

const myArray = arrayB.map((el) => {
  el.optionValue.filter((fl) => {
    arrayA.map(values => {
      values.map((value) => {
        !value.id.includes(fl.id)
      }) 
    })
  })
});

Note: For id:4 in result set is the case that is the selected productId for which there is no any value is selected. So in arrayA there is no value for productId:4. So in result for this kind of cases if there is no values are for comparison then it should be return as it is instead of blank array.

That is the selected productId for which there is no any value is selected. So in arrayA there is no value for productId:4... so in result for this kind of cases if there is no values are for comparison then it should be return as it is instead of blank array. — TMA
– TMA, Commented Jan 12, 2021 at 8:15

Nina Scholz · Accepted Answer · 2021-01-12 12:03:34Z

1

If you like to get only common identifier pairs from both, you could collect the identifier and map the filterd array of arrayB.

This approach takes only one loop for every array.

const
    arrayA = [[{ value: "#0767b9", id: 162, productId: 1 }, { value: "#f4b7d4", id: 164, productId: 1 }], [{ value: "#44acd8", id: 102, productId: 2 }], [{ value: "#609923", id: 106, productId: 3 }, { value: "#ee3b70", id: 107, productId: 3 }]],
    arrayB = [{ id: 1, optionValue: [{ value: "#002e63", id: 161, productId: 1 }, { value: "#0767b9", id: 162, productId: 1 }, { value: "#010b1d", id: 163, productId: 1 }, { value: "#f4b7d4", id: 164, productId: 1 }] }, { id: 2, optionValue: [{ value: "#EC7063", id: 93, productId: 2 }, { value: "#bf0000", id: 94, productId: 2 }, { value: "#44acd8", id: 102, productId: 2 }, { value: "#ffdbdb", id: 103, productId: 2 }] }, { id: 3, optionValue: [{ value: "#d861bd", id: 105, productId: 3 }, { value: "#609923", id: 106, productId: 3 }, { value: "#ee3b70", id: 107, productId: 3 }] }, { id: 4, optionValue: [{ value: "#44acd8", id: 165, productId: 4 }] }],
    identifiers = arrayA.reduce((r, a) => {
        a.forEach(({ id, productId }) => (r[productId] = r[productId] || {})[id] = true);
        return r;
    }, {}),
    result = arrayB.map(o => identifiers[o.id]
        ? { ...o, optionValue: o.optionValue.filter(({ id, productId }) => identifiers[productId][id]) }
        : o
    );

   console.log(result);

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

edited Jan 12, 2021 at 12:03

answered Jan 12, 2021 at 8:15

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

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

8 Comments

TMA Over a year ago

Yes it is almost nearest to the what I am looking for. Do review the update question with Note that in result id:4 will be also there if no matches is found.

TMA Over a year ago

By running this code into my Angular project it throws me an error like error TS1005: ':' expected. My typescript version is 2.9.2

Nina Scholz Over a year ago

maybe you need to replace (r[id] ??= {})[productId] = true with (r[id] = r[id] || {})[productId] = true

TMA Over a year ago

By replacing with the updated condition the result is giving the wrong result, can you pls check ?

Nina Scholz Over a year ago

i get the same result, please see above.

|

Parth Mansata · Accepted Answer · 2021-01-13 07:04:40Z

Can try out with this:

var arrayA = [
    [{value: "#0767b9", id: 162, productId: 1}, {value: "#f4b7d4", id: 164, productId: 1}],
    [{value: "#44acd8", id: 102, productId: 2}],
    [{value: "#609923", id: 106, productId: 3}, {value: "#ee3b70", id: 107, productId: 3}]
];

var arrayB = [
    {
        id: 1,
        optionValue: [{value: "#002e63", id: 161, productId: 1}, {
            value: "#0767b9",
            id: 162,
            productId: 1
        }, {value: "#010b1d", id: 163, productId: 1}, {value: "#f4b7d4", id: 164, productId: 1}]
    },
    {
        id: 2,
        optionValue: [{value: "#EC7063", id: 93, productId: 2}, {
            value: "#bf0000",
            id: 94,
            productId: 2
        }, {value: "#44acd8", id: 102, productId: 2}, {value: "#ffdbdb", id: 103, productId: 2}]
    },
    {
        id: 3,
        optionValue: [{value: "#d861bd", id: 105, productId: 3}, {
            value: "#609923",
            id: 106,
            productId: 3
        }, {value: "#ee3b70", id: 107, productId: 3}]
    },
    {
        id: 4,
        optionValue: [{value: "#44acd8", id: 165, productId: 4}]
    }
];
let result = [];
for (let i = 0; i < arrayB.length; i++) {
    let selectedElem = [];
    for (let j = 0; j < arrayB[i].optionValue.length; j++) {
        arrayA.forEach(elemA => {

            elemA.forEach(subElemA => {
                if(subElemA.id === arrayB[i].optionValue[j].id) {
                    selectedElem.push(arrayB[i].optionValue[j]);
                }
            })
        })
    }
    if (selectedElem.length !== 0){
        arrayB[i].optionValue = selectedElem;
    }
    result.push(arrayB[i]);
}
console.log('result::', JSON.stringify(result, null, 2));

Do review the update question with Note that in result id:4 will be also there if no matches is found.

Collectives™ on Stack Overflow

JavaScript: Comparing arrays of objects with nested array of object

2 Answers 2

8 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related