Retrieve distinct values for the keys from an object array in JavaScript

Question

Retrieve distinct values for the keys from an object array in JavaScript

Here is the structure of my array:

const arr1 = [
  {
    "Param1": "20",
    "Param2": ""8",
    "Param3": "11",
    "Param4": "4",
    "Param5": "18",
    "Param6": "20",
    "Param7": "8"
  },
  {
    "Param6": "21",
    "Param7": "8",
    "Param8": "11",
    "Param9": "4",
    "Param10": "18"
  },
  {
    "Param1": "20",
    "Param2": "8",
    "Param3": "10"
  }
]

I need to remove duplicate key-value pairs in the objects.
The expected output should be:

arr1 = [
  {
    "Param1": "20",
    "Param2": "8",
    "Param3": "11",
    "Param4": "4",
    "Param5": "18",
    "Param6": "20",
    "Param7": "8"
  },
  {
    "Param6": "21",
    "Param8": "11",
    "Param9": "4",
    "Param10": "18"
  },
  {
    "Param3": "10"
  }
]

I want an array with unique key-value pairs in each object. How can I achieve this?

javascript typescript

Answer 1

Answer №1

Process:

Initialize a map called seen with the structure {param: {value: boolean}} to keep track of seen parameters and values.
Create an array named result to store unique parameters.
Iterate through the input array, extract keys from each element, and iterate through them.
Check if the current parameter and value combination is already in the seen object. If not, add it to the result array and mark it as seen.
Finally, return the result array containing only unique parameters.

Code Snippet:

const removeDuplicates = (arr: Record<string, string>[]) => {
    return arr.reduce<{
        seen: Record<string, Record<string, boolean>>;
        result: Record<string, string>[];
    }>(
        (acc, item) => {
            acc.result.push(
                Object.fromEntries(
                    Object.entries(item).filter(([key, value]) => {
                        acc.seen[key] = acc.seen[key] ?? {};
                        if (acc.seen[key][value]) return false;
                        acc.seen[key][value] = true;

                        return true;
                    }),
                ),
            );
            return acc;
        },
        { seen: {}, result: [] },
    ).result;
};

playground

Answer 2

Process:

Initialize a map called seen with the structure {param: {value: boolean}} to keep track of seen parameters and values.
Create an array named result to store unique parameters.
Iterate through the input array, extract keys from each element, and iterate through them.
Check if the current parameter and value combination is already in the seen object. If not, add it to the result array and mark it as seen.
Finally, return the result array containing only unique parameters.

Code Snippet:

const removeDuplicates = (arr: Record<string, string>[]) => {
    return arr.reduce<{
        seen: Record<string, Record<string, boolean>>;
        result: Record<string, string>[];
    }>(
        (acc, item) => {
            acc.result.push(
                Object.fromEntries(
                    Object.entries(item).filter(([key, value]) => {
                        acc.seen[key] = acc.seen[key] ?? {};
                        if (acc.seen[key][value]) return false;
                        acc.seen[key][value] = true;

                        return true;
                    }),
                ),
            );
            return acc;
        },
        { seen: {}, result: [] },
    ).result;
};

playground

Retrieve distinct values for the keys from an object array in JavaScript

Answer №1

Similar questions

Is there a way to execute a JavaScript function on a webpage using Selenium automation?

Leveraging Trustpilot TrustBoxes within a Next.js environment

Ways to delete a class in typescript

PHP query Ajax navigation

I utilized the "data-target" attribute to ensure the active link retains its style. Is there a way to preserve the style when navigating away from an active link?

Unusual host value being returned by next/headers in Next.js version 13

Choose components identified by a dot

How do I repeatedly invoke a function in JQuery that accepts two different arguments each time?

Upon installing a global npm package, the system encountered an error stating: 'File or directory not found: ENOENT'

What is the best approach to handle Flow types for component props and getDerivedStateFromProps when the props are not the same

Issue with ESLint error in TypeScript PrimeReact async Button click handler

What is the Vercel equivalent to .netlify/functions?

What is the best way to synchronize the scale of images with the tempo of a song?

The most efficient method for handling a vast amount of data in NodeJS

Leveraging string interpolation in Typescript with a string sourced from a file

JavaScript saves all URLs using a consistent format (http, https, www.)

What is the best way to create a map in React that allows for changing the state without affecting all elements?

Spin a child element by clicking on its parent component

Trigger parent Component property change from Child Component in Angular2 (akin to $emit in AngularJS)

Retrieve vuex state in a distinct axios template js file