Filter out unique Data in Key Value Datastructure in Typescript

Question

I want to filter my Input Data with "uniqBy". I am new to typescript and don't have an idea how to achieve it. I know i have to loop over each sublist and make the uniqby for each element (data1, data2). This is my input Data below:

const data = [
     {
       data1: [
                {
                 id: "1",
                 label: "ONE",
                 anotherId: "3",
                 mygroupId: 1,
                 group: "Group_One",
                },
                {
                 id: "2",
                 label: "ONE",
                 anotherId: "33",
                 mygroupId: 1,
                 group: "Group_One",
                },
                {
                 id: "3",
                 label: "TWO",
                 anotherId: "11",
                 mygroupId: 1,
                 group: "Group_One",
                },
              ]
      },
        data2: [
                {
                 id: "4",
                 label: "ONE",
                 anotherId: "3",
                 mygroupId: 1,
                 group: "Group_One",
                },
                {
                 id: "5",
                 label: "TWO",
                 anotherId: "33",
                 mygroupId: 1,
                 group: "Group_One",
                }
               ]
     ]

I want to filter my Data, so that i have in each list data1 & data2 only unique information based on the "label" of each item inside these groups.

I want something like:

...
map(data => {
  const grouped = groupBy(item => item.group, data);

  const uniq = uniqBy( ... );

  return uniq;
})
...

const uniqByLabel = [
     {
       data1: [
                {
                 id: "1",
                 label: "ONE",
                 anotherId: "3",
                 mygroupId: 1,
                 group: "Group_One",
                },
                {
                 id: "3",
                 label: "TWO",
                 anotherId: "11",
                 mygroupId: 1,
                 group: "Group_One",
                },
              ]
      },
        data2: [
                {
                 id: "4",
                 label: "ONE",
                 anotherId: "3",
                 mygroupId: 1,
                 group: "Group_Two",
                },
                {
                 id: "5",
                 label: "TWO",
                 anotherId: "33",
                 mygroupId: 1,
                 group: "Group_Two",
                }
               ]
     ]

Answer 1

You can convert your data structure with help of Object.keys, reduce and uniqBy. I assume here, you mean lodash uniqBy, because you mentioned its exact name. A uniqBy version without lodash would also be fairly easy to implement with reduce (see sample down under for inspiration). So let's take your example:

const res = uniqBy(x => x.label, data[0].data1);

will filter one of your sub array for unique entries with label discriminator (first item wins). Presumed, the data structure can possibly contain multiple values and remains otherwise akin to your sample, you can code it like this:

const newData = data.map((d, idx) =>
  // make Object.keys typed by assertion
  (Object.keys(d) as Array<keyof typeof data[number]>).reduce(
    (acc, cur) => ({
      ...acc,
      [cur]: uniqBy(x => x.label, d[cur])
    }),
    // keep same type as each top array item
    {} as typeof data[number]
  )
);

Codesandbox

Full example (I am using the functional version of lodash here):

import uniqBy from "lodash/fp/uniqBy";

const data = [
  {
    data1: [
      {
        id: "1",
        label: "ONE",
        anotherId: "3",
        mygroupId: 1,
        group: "Group_One"
      },
      {
        id: "2",
        label: "ONE",
        anotherId: "33",
        mygroupId: 1,
        group: "Group_One"
      },
      {
        id: "3",
        label: "TWO",
        anotherId: "11",
        mygroupId: 1,
        group: "Group_One"
      }
    ]
  },
  {
    data2: [
      {
        id: "4",
        label: "ONE",
        anotherId: "3",
        mygroupId: 1,
        group: "Group_One"
      },
      {
        id: "5",
        label: "TWO",
        anotherId: "33",
        mygroupId: 1,
        group: "Group_One"
      }
    ]
  }
];

const res = data.map((d, idx) =>
  (Object.keys(d) as Array<keyof typeof data[number]>).reduce(
    (acc, cur) => ({
      ...acc,
      [cur]: uniqBy(x => x.label, d[cur])
    }),
    {} as typeof data[number]
  )
);

document.getElementById("app").innerHTML = `
<pre>
  ${JSON.stringify(res, null, 2)}
</pre>
`;