Question

我有一个简单的数组，想遍历具有相同键和值的数组，我想组成一组相同的值，并将相关项放在该数组下。

export class AppComponent implements OnInit {

  data = [
    {
      'con': 'Usa',
      'city': 'ny',
      'town':'as'
    },
    {
      'con': 'Ger',
      'city': 'ber',
      'town':'zd'
    },
    {
      'con': 'Usa',
      'city': 'la',
      'town':'ss'
    }
  ];
  array: any[] = [];
  ngOnInit() {
    this.array = this.data;
  }
}

html：

<div *ngFor="let item of array ">
  <h3>{{item.con}}</h3>
  <p>{{item.city}}</p>
  <p>{{item.town}}</p>
  <hr>
</div>

我得到以下结果：

Usa
ny
as
-----
Ger
ber
zd
-----
Usa
la
ss
-----

但是我真正想要的是将一组具有相同名称的国家/地区组成，并以以下格式显示该国家/地区下的相关城镇：

[{
        "con": "usa",
        "area": [{
            "city": "ny",
            "town": "as"
        }, {
            "city": "la",
            "town": "ss"
        }]
    },
    {
        "con": "ger",
        "area": [{
            "city": "ber",
            "town": "zd"
        }]
    }
]

Answer 1

使用合并对象将数据转换为数组，其中cities属性具有数组，像这样

[
    { con: "Usa": cities: ["ny", "la"] },
    { con: "Ger", cities: ["ber"] }
]

您可以按以下方式构建该数据结构：

this.array = Array.from(
    this.data.reduce(
        (map, {con, city}) => map.set(con, (map.get(con) || []).concat(city)), 
        new Map
    ), ([con, cities]) => ({ con, cities })
);

然后HTML部分变为：

<div *ngFor="let item of array ">
    <h3>{{item.con}}</h3>
    <div *ngFor="let city of item.cities ">
        <p>{{city}}</p>
    </div>
    <hr>
</div>

Answer 2

您可以先对JSON进行排序，然后再将其传递给有角ngFor，

 data = [
    {
      'con': 'Usa',
      'city': 'ny'
    },
    {
      'con': 'Ger',
      'city': 'ber'
    },
    {
      'con': 'Usa',
      'city': 'la'
    }
  ];


var expectedResult = data.sort(function (a, b) {
   return a.con.localeCompare(b.con);
});

console.log(expectedResult)
//OR
// change order as        return b.con.localeCompare(a.con);

如何使一组相同的值

2 个答案: