Question

不幸的是，我无法控制API如何返回数据。我得到我得到的：/

我需要帮助来正确格式化我的数据，或者可能需要使用自定义管道正确显示数据。我尝试了不同的操作（mergeMap，过滤器，按管道分组等），但是我似乎无法完全得到想要的东西。任何帮助将不胜感激。

样本数据

[
  { "id": "rossbo01", "first": "Bob", "last": "Ross", "photo": "photo1.jpg", "photoTitle": "Photo1"},
  { "id": "rossbo01", "first": "Bob", "last": "Ross", "photo": "photo2.jpg", "photoTitle": "Photo2"},
  { "id": "rogersfr02", "first": "Fred", "last": "Rogers", "photo": "photo55.jpg", "photoTitle": "Photo55"},
  ...
]

组件

this.searchService.getData().subscribe(searchResults => {
  this.searchResults = searchResults;
  ....? transform data here or custom pipe in template
});

所需结果（先显示名称，然后显示所有相关照片）

Bob Ross
    Photo1
    Photo2
Fred Rogers
    Photo55
...

获得我想要的输出的最有效方法是什么？预先感谢！

Answer 1

您可以使用loadash的groupBy和toPairs函数根据用户的名字和姓氏对数组数据进行分组，如下所示：-

var users = [
  { "id": "rossbo01", "first": "Bob", "last": "Ross", "photo": "photo1.jpg", "photoTitle": "Photo1"},
  { "id": "rossbo01", "first": "Bob", "last": "Ross", "photo": "photo2.jpg", "photoTitle": "Photo2"},
  { "id": "rogersfr02", "first": "Fred", "last": "Rogers", "photo": "photo55.jpg", "photoTitle": "Photo55"}
]

var result = _.groupBy(users, (user)=> user.first + ' ' + user.last);
result = _.toPairs(result);

console.log('Result: ', result);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.js"></script>

您可以根据上述功能格式化或创建自己的自定义管道。

您可以参考以下stackblitz来查看有效的Angular解决方案。

Answer 2

以下代码是我的纯RxJS解决方案：P

import { from } from 'rxjs';
import { groupBy, mergeMap, map, toArray, tap } from 'rxjs/operators';

let searchResults = [
  { "id": "rossbo01", "first": "Bob", "last": "Ross", "photo": "photo1.jpg", "photoTitle": "Photo1"},
  { "id": "rossbo01", "first": "Bob", "last": "Ross", "photo": "photo2.jpg", "photoTitle": "Photo2"},
  { "id": "rogersfr02", "first": "Fred", "last": "Rogers", "photo": "photo55.jpg", "photoTitle": "Photo55"}
];

from(this.searchResults).pipe(

  // Select necessary attributes
  map(result => {
    //console.log('Result:', result);
    let fname = result['first'];
    let lname = result['last'];
    let photo = result['photoTitle'];
    let rname = [fname, lname].join(' ');
    return { rname, photo };
  }),

  // group objects by `rname` attribute
  groupBy(result => result['rname']),

  // return each item in group as array
  mergeMap(group => {
    //console.log('Group $1:', group);
    return group.pipe(
      toArray(),
    );
  }),

  // Reduce arrays of objects
  map(group => {
    //console.log('Group $2:', JSON.stringify(group));
    let rname = group[0]['rname'];
    return group.reduce((a, b) => {
      return {
        rname: rname,
        photo: [a.photo, b.photo],
      };
    });
  }),

  // Bypass and verify results
  tap(result => console.log('Result:', result)),

).subscribe();

在Angular 5+中过滤和/或分组数据

2 个答案: