将多个可观察数组组合成新的对象数组 [英] Combine multiple observable arrays into new object array

问题描述

我有 3 个如下所示的可观察数组.

I have 3 observable arrays like below.

persons = [
   {
      "firstName":"john",
      "lastName":"public",
      "locationID":"1",
      "departmentID":"100"
   },
   {
      "firstName":"sam",
      "lastName":"smith",
      "locationID":"2",
      "departmentID":"101"
   }
]

departments = [{"departmentID": "100",
               "name": "development"
               },
               {"departmentID": "101",
                "name": "sales"
               }]

locations = [{"locationID": "1", "name": "chicago"},
              {"locationID":"2", "name": "ny"}]

我正在尝试将这 3 个组合成以下结果，

I am trying to combine these 3 into below result ,

result = [
   {
      "firstName":"john",
      "lastName":"public",
      "location":"development",
      "department":"sales"
   },
   {
      "firstName":"sam",
      "lastName":"smith",
      "location":"ny",
      "department":"sales"
   }
]

为了得到想要的结果，我对可观察的人使用了 map 函数来提供新的对象数组.

To get the desired result, I have used map function on persons observable to give new object array.

this.store<Person>('persons')
.map(function(person){
     let p = new personDetail()
     p.firstName = person.firstName,
     p.lastName = person.lastName
     return p;
})

PersonDetail 对象具有 firstName、lastName、location 和 department 属性.如何查找可观察的部门并获取 departmentID 的匹配行以获取部门名称?

PersonDetail object has firstName, lastName, location and department properties. How do I do a lookup into departments observable and get a matching row for departmentID to get the department name ?

我是 rxjs 库的新手，如果有更好的方法来达到预期的结果，请告诉我.

I am new to rxjs library, please let me know if there is a better way to attain the desired result.

推荐答案

因为您很可能希望从远程服务中获取部门和位置列表(发出另一个 HTTP 请求)，所以我会立即使用 Observables 来完成

Since you'll very likely want to fetch lists of departments and locations from a remote service (make another HTTP request) I'd do it right away with Observables as well.

Observable.from(persons)
    .mergeMap(person => {
        let department$ = Observable.from(departments)
            .filter(department => department.departmentID == person.departmentID);

        let location$ = Observable.from(locations)
            .filter(location => location.locationID == person.locationID);

        return Observable.forkJoin(department$, location$, (department, location) => {
            return {
                'firstName': person.firstName,
                'lastName': person.lastName,
                'location': location.name,
                'department': department.name,
            };
        });
    })
    .toArray()
    .subscribe(result => console.log(result));

这会打印到控制台:

[ { firstName: 'john',
    lastName: 'public',
    location: 'chicago',
    department: 'development' },
  { firstName: 'sam',
    lastName: 'smith',
    location: 'ny',
    department: 'sales' } ]

有两个 Observables department$ 和 location$ 用 filter() 操作符过滤以获得唯一匹配 ID 的项目.然后 forkJoin() 操作符等待，直到它们都完成.运算符 mergeMap() 然后重新发送从 forkJoin() 返回的值.最后使用 toArray() 我们将所有项目收集到一个数组中.

There're two Observables department$ and location$ that are filtered with filter() operator to get the only item with matching ID. Then forkJoin() operator waits until both of them are complete. Operator mergeMap() then reemits the value returned from forkJoin(). At the end with toArray() we collect all items into a single array.

代替 Observable.from(...)，您可以使用任何您需要的服务(例如 http.get(...)).

Instead of Observable.from(...) you can have whatever service you'll need (eg. http.get(...)).

查看现场演示:https://jsbin.com/nenekup/4/edit?js，控制台

类似问题:使用 Observables 合并子数组 和 订阅嵌套的Observable

这篇关于将多个可观察数组组合成新的对象数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！