How to retrieve distinct items from an array using Javascript

Question

How to retrieve distinct items from an array using Javascript

If I have the following array of objects:

const arr = [{ id: 'A', version: 0, name: 'first' },
             { id: 'A', version: 1, name: 'first' },
             { id: 'B', version: 0, name: 'second' },
             { id: 'A', version: 2, name: 'first' },
             { id: 'B', version: 1, name: 'second' }];

I want to use this array as input for creating two drop-down menus.

The first drop-down menu should display only the values A and B.

To achieve this, I can do the following:

const firstDropdownOptions = [...new Set(arr.map((el) => el.id))];

However, this code will only return ['A', 'B'] without any additional information about the properties of each object.

It would be more useful if the output looked like this:

[{ id: 'A', version: '0', name: 'first' }, { id: 'B', version: '0', name: 'second' }]

Do you have any suggestions on how to modify the code to return the desired array format?

javascript arrays ecmascript-6

Answer 1

Answer №1

You can easily group by the id and dynamically set the options for the second dropdown based on the selection made in the first dropdown.

const
    setOptions = id => groups[id].forEach(o => {
        const option = document.createElement('option');
        option.value = o.version;
        option.innerHTML = o.version;
        second.appendChild(option);
    });

    data = [{ id: 'A', version: 0, name: 'first' }, { id: 'A', version: 1, name: 'first' }, { id: 'B', version: 0, name: 'second' }, { id: 'A', version: 2, name: 'first' }, { id: 'B', version: 1, name: 'second' }],
    first = document.createElement('select'),
    second = document.createElement('select'),
    groups = data.reduce((r, o) => ((r[o.id] ??= []).push(o), r), {});

document.body.appendChild(first);
document.body.appendChild(document.createTextNode(' '));
document.body.appendChild(second);

Object.keys(groups).forEach(k => {
    const option = document.createElement('option');
    option.value = k;
    option.innerHTML = k;
    first.appendChild(option);
});

setOptions('A');

first.addEventListener('change', function (event) {
    let i = second.options.length;
    while (i--) second.remove(i);
    setOptions(first.value);
});

Answer 2

You can easily group by the id and dynamically set the options for the second dropdown based on the selection made in the first dropdown.

const
    setOptions = id => groups[id].forEach(o => {
        const option = document.createElement('option');
        option.value = o.version;
        option.innerHTML = o.version;
        second.appendChild(option);
    });

    data = [{ id: 'A', version: 0, name: 'first' }, { id: 'A', version: 1, name: 'first' }, { id: 'B', version: 0, name: 'second' }, { id: 'A', version: 2, name: 'first' }, { id: 'B', version: 1, name: 'second' }],
    first = document.createElement('select'),
    second = document.createElement('select'),
    groups = data.reduce((r, o) => ((r[o.id] ??= []).push(o), r), {});

document.body.appendChild(first);
document.body.appendChild(document.createTextNode(' '));
document.body.appendChild(second);

Object.keys(groups).forEach(k => {
    const option = document.createElement('option');
    option.value = k;
    option.innerHTML = k;
    first.appendChild(option);
});

setOptions('A');

first.addEventListener('change', function (event) {
    let i = second.options.length;
    while (i--) second.remove(i);
    setOptions(first.value);
});

Answer 3

Answer №2

After some experimentation, I discovered a concise way to address this issue:

const uniqueValues = array.filter((element, idx, self) => { 
    return self.findIndex(item => item.id === element.id) === idx
});

Answer 4

After some experimentation, I discovered a concise way to address this issue:

const uniqueValues = array.filter((element, idx, self) => { 
    return self.findIndex(item => item.id === element.id) === idx
});

Answer 5

Answer №3

Insight : By utilizing the array.map() method to return only the id, you are able to obtain unique Id's [A, B] in a separate array. If you wish to retrieve all other properties, you will need to implement a condition to verify if version === 0.

Interactive Example :

const arr = [{ id: 'A', version: 0, name: 'first' },
             { id: 'A', version: 1, name: 'first' },
             { id: 'B', version: 0, name: 'second' },
             { id: 'A', version: 2, name: 'first' },
             { id: 'B', version: 1, name: 'second' }];
             
const firstDropdownData = arr.filter((obj) => obj.version === 0);

console.log(firstDropdownData);

Answer 6

Insight : By utilizing the array.map() method to return only the id, you are able to obtain unique Id's [A, B] in a separate array. If you wish to retrieve all other properties, you will need to implement a condition to verify if version === 0.

Interactive Example :

const arr = [{ id: 'A', version: 0, name: 'first' },
             { id: 'A', version: 1, name: 'first' },
             { id: 'B', version: 0, name: 'second' },
             { id: 'A', version: 2, name: 'first' },
             { id: 'B', version: 1, name: 'second' }];
             
const firstDropdownData = arr.filter((obj) => obj.version === 0);

console.log(firstDropdownData);

How to retrieve distinct items from an array using Javascript

Answer №1

Answer №2

Answer №3

Similar questions

Import several image files using AngularJS

Accessing Key-Value Pairs in PHP from a JSON Encoded Array

Navigating on Blogger can be a tricky task when it comes to searching and

After a short delay, make sure to open a new tab when clicking to bypass any popup blockers without relying on Ajax technology

I am curious about the inner workings of the `createApplication()` function in the ExpressJS source code. Can you shed some light on

What are the steps to retrieve JSON data and display it using an unordered list in an HTML document?

Detecting Android devices

Place a div element directly into a specific cell within the table

Transferring a value via AJAX that has been modified by a previous AJAX call

Get JSON data through AJAX using two different methods

What could be causing jQuery document ready to restrict access to global variables?

Revamping array elements in React

loading xml data into a table partially using jquery

performing asynchronous iteration with HTTP PUT requests

Is it possible to generate an array of strings from the keys of a type or interface?

Ensuring the correct data type for a member variable within a two-dimensional array

Verify whether a dependency is being passed into an Angular component

The AJAX validation process fails to run prior to the execution of the login PHP script

Issue with handling click events on action column in Datatable using jQuery

Adding query parameters to the end of every link on a webpage