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或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/

Answer 2

基于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

从对象数组中获取uniq元素

2 个答案: