2016-12-16 14 views
1

React JSのオブジェクトの配列から重複した要素を削除します。次のように私のコードは次のとおりです。オブジェクトの配列からuniq要素を取得

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.

答えて

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

+0

これはmakeだけに基づいてユニークです。私はそれがmakeとモデルに基づいてユニークであることを望んでいます。 – Boky

+0

私の悪い、私は私の答えを編集しました。 –

1

私のアプローチをご確認ください。 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/

+0

これはmakeのみに基づいています。私はそれがmakeとモデルに基づいてユニークであることを望んでいます。 – Boky

+0

これはどういう意味ですか?ユニークな配列の基準は何ですか?私が理解したところで、私は同じmakeを持つ配列をフィルタリングしました。より多くの基準を追加したい、ちょうど同じアプローチに従います – Ved

+0

あなたのユニークな配列をここに投稿できますか? – Ved

関連する問題