javascript - 从对象数组中获取唯一元素

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