Create new Set of unique values but copy another value from the same record to create a new array of objects

Question

I am using [...new Set] to create a new array of unique items, the issue I'm facing is that the ultimate goal is to create a new array of objects which should be unique (or at least unique according to the first property).

Some sample data:

const props = {};
props.gridData = [
    {
        "id": 198,
        "dateReceived": "2020-12-29T10:10:45.513",
        "title": "Contracts Submitted",
        "subject": "Contract(s) for xxx Ltd submitted.",
        "readUnread": false,
        "userId": 13,
        "emailAddress": "[email protected]",
        "organisation": 43,
        "callToAction": "string",
        "json": "<h1>Your latest statement is here</h1>",
        "name": "Name"
    },
    {
        "id": 337,
        "dateReceived": "2021-04-09T11:41:03.033",
        "title": "Your latest invoice is now ready to view",
        "subject": "Your latest invoice is here (Account ID XXXXXX)",
        "readUnread": true,
        "userId": 13,
        "emailAddress": "[email protected]",
        "organisation": 43,
        "callToAction": null,
        "json": "<h1>Your latest invoice is here</h1>",
        "name": "Ebill"
    },
    {
        "id": 343,
        "dateReceived": "2021-04-09T11:41:03.047",
        "title": "Meter read reminder",
        "subject": "6,Unit 1, Somewhere, Somewhere Else, AB1 1YZ",
        "readUnread": true,
        "userId": 13,
        "emailAddress": "[email protected]",
        "organisation": 43,
        "callToAction": null,
        "json": "<h1>Your latest statement is here</h1>",
        "name": "MeterReadReminder"
    },
    {
        "id": 387,
        "dateReceived": "2021-05-07T07:26:40.653",
        "title": "Your latest invoice is now ready to view",
        "subject": "Your latest invoice is here (Account ID XXXXXX)",
        "readUnread": false,
        "userId": 13,
        "emailAddress": "[email protected]",
        "organisation": 43,
        "callToAction": "NULL",
        "json": "<h1>Your latest invoice is here</h1>",
        "name": "Ebill"
    },
    ...
]

Here is my current JS:

const filteredItems = () => [...new Set(props.gridData.map(item =>
    item.name
))];

This will create a new array of unique items. The goal is go have filteredItems look like this:

const filteredItems = [
  { value: 'MeterReadReminder', display: 'Meter Read Reminder' },
  { value: 'Ebill', display: 'Your latest invoice is now ready to view' },
  ...
];

Obviously value and display would be read from the map function so 'value': item.name etc.

I don't know if this can be achieved in a single function or whether I need to create two arrays sequentially. Also sorry if this question title is poorly worded, I will try and tighten that up.

(I am using React and TS, but the jsfiddle is pure js).

JSFIDDLE

Nur · Accepted Answer · 2021-06-02 15:39:27Z

1

You can use Array.find, to find 1st item from array.

let gridData = [{ "title": "Contracts Submitted", "name": "Name" }, { "title": "Your latest invoice is now ready to view", "name": "Ebill" }, { "title": "Meter read reminder", "name": "MeterReadReminder" }, { "title": "Your latest invoice is now ready to view", "name": "Ebill" },];

const filteredItems = [...new Set(gridData.map(item => item.name))];

let results = filteredItems.map((value) => ({
    value,
    display: gridData.find(item => item.name == value)["title"]
}))

console.log(results);

You can optimize performance by a lot with lookup, something like this:

let gridData = [{ "title": "Contracts Submitted", "name": "Name" }, { "title": "Your latest invoice is now ready to view", "name": "Ebill" }, { "title": "Meter read reminder", "name": "MeterReadReminder" }, { "title": "Your latest invoice is now ready to view", "name": "Ebill" },],
    result = [], set = new Set;

for (const { name, title } of gridData) {
    if (set.has(name)) continue;
    result.push({ value: name, display: title });
    set.add(name)
}
console.log(result);

edited Jun 2, 2021 at 15:39

answered Jun 2, 2021 at 15:11

Nur

2,5033 gold badges19 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

lharby Over a year ago

Thank you! These both look very promising, I will test it out soon. Ta

lharby Over a year ago

Yep both work, trying to work out which one I prefer, I think option 1 as I understand it better. Thanks so much for your time (I would still love this to be returned from a single const or function but I don't know if that is possible).

Nur Over a year ago

@lharby, Use 2nd one, which is 100x time faster then 1st approach, if gridData is large, it would be more then 1000x time faster!

Collectives™ on Stack Overflow

Create new Set of unique values but copy another value from the same record to create a new array of objects

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related