How to eleminate the duplicate objects within the array in angular

Question

I am trying to filter the duplicate values and get the unique values as an array of object. I don't know how to get the unique value based on the color. so below is my data:

[
    {
        "code": "xxxx1",
     
        "priceData": {
            "currencyIso": "USD",
            "value": 649.99
        },
 
        "variants": [
            {
                "color": "#212028 |Black",
            }
        ]
    },
    {
        "code": "xx2",
        "priceData": {
            "currencyIso": "USD",
            "value": 999.99
        },

        "variants": [
            {
                "color": "#212028 |Black",
            },
        ]
    },
    {
        "code": "xx3",
        "priceData": {
            "currencyIso": "USD",
            "value": 549.99
        },
        "variants": [
            {
                "color": "#D3CCC1 |Silver",
            },
           
        ]
    },
    {
        "code": "xxx-4",

        "priceData": {
            "currencyIso": "USD",
            "value": 649.99
        },
   
        "variants": [
            {
                "color": "#D3CCC1 |Silver",
               
            }
        ]
    }
]

Expected Value is:

[
    {
        "code": "xxxx1",
     
        "priceData": {
            "currencyIso": "USD",
            "value": 649.99
        },
 
        "variants": [
            {
                "color": "#212028 |Black",
            }
        ]
    },
    {
        "code": "xx3",
        "priceData": {
            "currencyIso": "USD",
            "value": 549.99
        },
        "variants": [
            {
                "color": "#D3CCC1 |Silver",
            },
           
        ]
    },
   
]

The below code returns only the variants array of objects. but I want as an expected result which I mentioned as above

  let variants2 = Array.from(
            new Set(
              variants.map(
                (a) => a.variants
              )
            )
          ).map((variants) => {
            return variants.find((a) => a.color=== a.color);
          });
          [
            ...new Map(variants2.map((item) => [item.value, item])).values(),
          ];

can someone help me to figure out this problem?

Answer 1

One of the many possible approaches (the input array is called items):

Array.from(new Map(items.reverse().map(item => [item.variants[0].color, item])).values()).reverse();

Test:

const items = [
    {
        "code": "xxxx1",
     
        "priceData": {
            "currencyIso": "USD",
            "value": 649.99
        },
 
        "variants": [
            {
                "color": "#212028 |Black",
            }
        ]
    },
    {
        "code": "xx2",
        "priceData": {
            "currencyIso": "USD",
            "value": 999.99
        },

        "variants": [
            {
                "color": "#212028 |Black",
            },
        ]
    },
    {
        "code": "xx3",
        "priceData": {
            "currencyIso": "USD",
            "value": 549.99
        },
        "variants": [
            {
                "color": "#D3CCC1 |Silver",
            },
           
        ]
    },
    {
        "code": "xxx-4",

        "priceData": {
            "currencyIso": "USD",
            "value": 649.99
        },
   
        "variants": [
            {
                "color": "#D3CCC1 |Silver",
               
            }
        ]
    }
];
const items2 = Array.from(new Map(items.reverse().map(item => [item.variants[0].color, item])).values()).reverse();
console.log(items2);

Note that items.reverse() reverses the original array in place. If you need its original order, you would have to call items.reverse() again (after creating items2).

For every unique color, this approach puts the first object into the result, as in your example. If getting the last object is also OK, you can remove both .reverse() calls from the above code:

Array.from(new Map(items.map(item => [item.variants[0].color, item])).values());