Question

我正在用 TypeScript 编写应用程序我正在使用 JSON 数组，如：

data = [{"name":"dog",
            "line":1,
"order":1},
            {"name":"cet",
            "line":1,
"order":2},
            {"name":"red",
            "line":2,
"order":1},
            {"name":"green",
            "line":2,
"order":2},
            {"name":"elephant",
            "line":1,
"order":3}]

我想按“行”对数组进行分组并按升序排序并且“行”中的每个对象按“顺序”排序并显示在 HTML 页面上，这样每个“行”将在单独的行中。

<div *ngFor="let d of data" >
   <div *ngFor="" class= "row">
      <span >{{d.name}}</span>
   <div> 
<div>

分组和排序然后查看的最佳方法是什么？

Answer 1

如果我是你（如果我理解正确），我会使用 .reduce() 方法对元素进行分组，然后对每个结果数组进行排序，最后创建一个条目数组以进行迭代。

分组和排序可能如下所示：

const data = [{"name":"dog", "line":1, "order":1},
            {"name":"cet", "line":1, "order":2},
            {"name":"red", "line":2, "order":1},
            {"name":"green", "line":2, "order":2},
            {"name":"elephant", "line":1, "order":3}];

const grouped = data.reduce((res, curr) => {
  res[curr.line] = res[curr.line] || [];
  res[curr.line].push(curr);
  return res;
}, {});

for (const group of Object.values(grouped)) {
  group.sort((a, b) => a.order - b.order);
}

const entries = Object.entries(grouped);

console.log(entries);

并在您的模板中迭代 entries：

<div *ngFor="let e of entries" >
   <div *ngFor="let group of e[1]" class= "row">
      <span>{{group.name}}</span>
   </div>
   <span>{{e[0]}}</span>
</div>

你可以看到一个例子 here

如何对数组对象进行分组和排序

1 个答案: