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

Creating a personalized image download feature in PhotoSwipe.js

I am looking to transfer information in CodeIgniter from a view utilizing AJAX post, handle that information in the controller, and then return the resultant array back to the view

Can anyone recommend an easy regular expression to validate date format patterns?

Display all the names of the files from various file inputs in a unified notification

Incorporating SCSS directly in React component along with material-ui styling

Guide on setting up @types from an NPM module containing the "@" symbol in its title

Sanitize input data prior to using express-validator in a Node.js application

AngularJS: Controller isn't being triggered

Assistance Required in Turning Down Trade Requests on Steam That Involve Losing items

Safari's Web Audio API suffering from subpar performance and various shortcomings

Why is it that servlets are unable to send custom JSON strings, and why is it that Ajax is unable to receive them?

Using React and TypeScript, open the initial tab from a mapped array with an accordion component

Error: Unexpected TypeError occurred stating that 'map' cannot be read from undefined, although the map method is not being used in the code

What are the steps to add code into the Monaco Editor using Playwright?

Ways to retrieve an input field value without triggering form submission

Every time an npm installation is attempted, the following error occurs: "npm ERR! Cannot read property 'resolve' of undefined."

Calendar: Display upcoming dates within the next week starting from the current week

Looking to retrieve selections when the inputValue changes in react-select?

Async function is improperly updating the array state by overwriting it completely instead of just updating one item as

Prevent Mui popover from closing when clicking outside