オブジェクトの配列から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機能を試してみましたが、それはdidnの仕事はありません。

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/