Получить элементы uniq из массива объектов

Question

Я хочу удалить дублированные элементы из массива объектов в React JS. Мой код выглядит следующим образом:

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')); 

результат, который я получаю:

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) 

Результат, который я хочу это:

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

Я попытался с lodash uniq функции, но Бесполезный Не работай.

Here is a fiddle.

Answer 1

решение на основе Lodash, используя Uniq на основе автомобиля марки:

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

Answer 2

Пожалуйста, проверьте мой подход. Вы можете также использовать библиотеку, например, lodash или underscore, чтобы получить уникальные элементы из массива.

Во-первых, получить массив уникальных элементов

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"); 

И чем

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/