discard duplicates of fetched makes in array of objects

Question

So I want to populate react-select with a Make category dropdown. I want to have all makes in a dropdown like categories and to filter a list of cars when a make is selected. This is the result of maped Array.

The makes are repeting themselves. How do I discard duplicates? Here is my code:

import React from 'react' import './FilterSideBar.css' import Select from 'react-select';

const colourStyles = {   control: (styles) => ({ ...styles, backgroundColor: "transparent" }),   option: (styles, { isDisabled })
=> {
    return {
      ...styles,
      backgroundColor: isDisabled ? "transparent" : "grey" ,
      color: "#FFF",
      cursor: isDisabled ? "not-allowed" : "default"
    };   } };

const FilterSideBar = ({carsList}) => {   const options = carsList.map((car) => {
    return {
      value: car.make,
      label: car.make
    }   })

    return (
            <> <Select  options={options} styles={colourStyles} isSearchable={false}/>
            </>
        )
    }

export default FilterSideBar

And here is json example that Im fetching from:

>  [{"id":"14","make":"KIA","model":"Ceed","year":"2017","month":"12","body":"Kombi
> \/ Family
> Van","mileage":"76000","fuel":"Diesel","transmission":"Schaltgetriebe","condition":"Gebrauchtwagen","drivetrain":"Vorderrad","engine":"1582"},
> {"id":"15","make":"BMW","model":"750","year":"2017","month":"12","body":"Limo","mileage":"24000","fuel":"Diesel","transmission":"Schaltgetriebe","condition":"Gebrauchtwagen","drivetrain":"Ruckrad","engine":"5000",
> {"id":"16","make":"KIA","model":"Ceed","year":"2019","month":"05","body":"Kombi
> \/ Family
> Van","mileage":"120000","fuel":"Diesel","transmission":"Schaltgetriebe","condition":"Gebrauchtwagen","drivetrain":"Vorderrad","engine":"1700"]

Duplicate: [Get all unique values in a JavaScript array (remove duplicates)](https://stackoverflow.com/questions/1960473/get-all-unique-values-in-a-javascript-array-remove-duplicates) — , Jul 28 '22 at 14:37
Since there is a norm in asking questions as it states in your profile link I should have probably defined my question differently. Yes I have tried set function but it didnt work. For other solutions, there are to me not thoroughly explained therefor, because Im still novice in React, I didnt put up my tries here on stack. Nevermind, I will work on my questioning. — Nemanja, Jul 28 '22 at 15:34

score 1 · Accepted Answer · answered Jul 28 '22 at 14:57

1

const distinctBy = (arr, f) => {
  return arr.filter((a, i) => arr.findIndex((b) => f(a) === f(b)) === i);
}

const options = carsList
  .map((car) => {
    return {
      value: car.make,
      label: car.make
    };
  })
 
 const distinctOptions = distinctBy(options, car => car.value)

answered Jul 28 '22 at 14:57

Ivan Shumilin

1,743
3
13
18

The answer is correct! Thank you. Can you take time only to explain how does code work? – Nemanja Jul 28 '22 at 15:02
1

@Nemanja This is a slight variation on [filter + indexOf approach](https://stackoverflow.com/a/43046408/4980215). We take each element (a) and find the first element (b) such that `f(a) === f(b)`. It must be exactly the same element with the same index `findIndex(...) === i`. If not, then we have found a duplicate with a smaller index and can skip the element (a). In your case f(car) is car.value. Make sense? – Ivan Shumilin Jul 28 '22 at 15:43
1

Thank you for explanation. Sorry if it was a generic question, but the set function with spread operator didn't work for me. – Nemanja Jul 28 '22 at 15:49

discard duplicates of fetched makes in array of objects

1 Answers1