Get uniq elements from array of objects

Question

I want to remove duplicated elements from an array of objects in React JS. My code is as follows :

let cars = [
    {
        id: 1,        
        make: "Volkswagen",
        model: "Golf",
        desc: "2.0 CR TDi Comfortline BMT"
    }, {
        id: 2,
        make: "Audi",
        model: "Q3",
        desc: "2.0 CR TDi Comfortline BMT"        
    }, {
        id: 3,
        make: "Volkswagen",
        model: "Passat CC",
        desc: "2.0 CR TDi Comfortline BMT",

    }, {
        id: 4,
        make: "Volkswagen",
        model: "Golf",
        desc: "1.9 TDI",

    }, {
        id: 5,
        make: "Audi",
        model: "Q5",
        desc: "2.0 CR TDi Comfortline BMT",

    }, {
        id: 6,
        make: "Volkswagen",
        model: "Golf",
        desc: "2.0 CR TDi",

    }
]

class Test extends React.Component {
        getTotalModels(model){
        return cars.filter(c => c.model === model).length;
    }

    getTotalMakes(make){
        return cars.filter(c => c.make === make).length;
    }

        render(){
        return (
        <div>
            {cars.map(c => {            
            return (
                <div key={c.id}>
                <div className="make">{c.make} ({this.getTotalMakes(c.make)})</div>                
                {cars.filter(j => j.make === c.make).map(i => {
                    return <div className="models">{i.model} ({this.getTotalModels(i.model)})</div>
                })}
              </div>
            )
          })}
        </div>
      )
    }
}

React.render(<Test />, document.getElementById('container'));

The result that I get is :

Volkswagen (4)
    Golf (3)
    Passat CC (1)
    Golf (3)
    Golf (3)
Audi (2)
    Q3 (1)
    Q5 (1)
Volkswagen (4)
    Golf (3)
    Passat CC (1)
    Golf (3)
    Golf (3)
Volkswagen (4)
    Golf (3)
    Passat CC (1)
    Golf (3)
    Golf (3)
Audi (2)
    Q3 (1)
    Q5 (1)
Volkswagen (4)
    Golf (3)
    Passat CC (1)
    Golf (3)
    Golf (3)

The result that I want is :

Volkswagen (4)
    Golf (3)
    Passat CC (1)
Audi (2)
    Q3 (1)
    Q5 (1)

I tried with lodash uniq function, but it didn't work.

Here is a fiddle.

Alex Young · Accepted Answer · 2016-12-16 17:28:33Z

1

Lodash based solution, using uniq based on car make:

class Test extends React.Component {
        getTotalModels(model){
        return cars.filter(c => c.model === model).length;
    }

    getTotalMakes(make){
        return cars.filter(c => c.make === make).length;
    }

    render(){
        return (
        <div>
            {
          _.uniq(cars, car => car.make)
          .map(c => {            
            return (
                <div key={c.id}>
                <div className="make">{c.make} ({this.getTotalMakes(c.make)})</div>                
                {_.uniq(cars.filter(j => j.make === c.make), car => car.model).map((make, i) => {
                    return <div key={i} className="models">{make.model} ({this.getTotalModels(make.model)})</div>
                })}
              </div>
            )
          })}
        </div>
      )
    }
}

Fiddle

edited Dec 16, 2016 at 17:28

answered Dec 16, 2016 at 11:55

Alex Young

4,0391 gold badge19 silver badges35 bronze badges

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

1 Comment

Boky Over a year ago

This is unique based only on make. I want that it's unique based on make and model.

Ved · Accepted Answer · 2016-12-16 11:56:41Z

1

Please check my approach. You can also use library like lodash or underscore to get the unique items from array.

First , get the array of unique elements

function removeDuplicates(originalArray, prop) {
     var newArray = [];
     var lookupObject  = {};

     for(var i in originalArray) {
        lookupObject[originalArray[i][prop]] = originalArray[i];
     }

     for(i in lookupObject) {
         newArray.push(lookupObject[i]);
     }
      return newArray;
 }

var uniqueCars = removeDuplicates(cars, "make");

And , than

return (
        <div>
            {uniqueCars.map(c => {          // Now loop will run for only unique items  
            return (
                <div key={c.id}>
                <div className="make">{c.make} ({this.getTotalMakes(c.make)})</div>                
                {cars.filter(j => j.make === c.make).map(i => {
                    return <div className="models">{i.model} ({this.getTotalModels(i.model)})</div>
                })}
              </div>
            )
          })}
        </div>
      )

http://jsfiddle.net/jwm6k66c/1632/

edited Dec 16, 2016 at 11:56

answered Dec 16, 2016 at 11:50

Ved

12.1k5 gold badges46 silver badges61 bronze badges

2 Comments

Boky Over a year ago

This is unique based only on make. I want that it's unique based on make and model.

Ved Over a year ago

What do mean by this. What is the criteria for unique array? Any way what I understood , I filtered the array having same make. You want to add more criteria, just follow the same approach

Collectives™ on Stack Overflow

Get uniq elements from array of objects

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related