从对象数组中获取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功能，但它不起作用。

这是小提琴。

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>
      )
    }
}

小提琴

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/