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.

Answer 1

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));

Answer 2

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; }