Question

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

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个结合到下面的结果中，

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

为了获得所需的结果，我在可观察的人身上使用了map函数来给出新的对象数组。

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的匹配行以获取部门名称？

我是rxjs图书馆的新手，如果有更好的方法可以获得所需的结果，请告诉我。

Answer 1

由于您很可能想要从远程服务中获取部门和位置列表（发出另一个HTTP请求），我也会立即使用Observables。

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' } ]

使用department$运算符过滤了两个Observable location$和filter()，以获取唯一具有匹配ID的项目。然后forkJoin()运算符等待，直到它们都完成。然后，运营商mergeMap()重新提交从forkJoin()返回的值。在toArray()结束时，我们将所有项目收集到一个数组中。

而不是Observable.from(...)您可以获得您需要的任何服务（例如http.get(...)）。

查看现场演示：https://jsbin.com/nenekup/4/edit?js,console

类似问题：Merge subarrays using Observables和Subscribing to a nested Observable

Answer 2

目前还不清楚你的观察者究竟发出了什么，所以我考虑了两个选择。

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

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

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

// Option 1: first observable emits persons one by one, 
// locations and departments are emitted as whole arrays.
let o1: any = Observable.from(persons);
let o2: any = Observable.of(departments);
let o3: any = Observable.of(locations);

o1.withLatestFrom(o2, o3, (p, d, l) => {
    // here it is probably better to convert array to some kind of map or dictionary,
    // but I'm only showing Rxjs concept of doing such things.
    let location = l.find(c => c.locationID === p.locationID);
    let department = d.find(c => c.departmentID === p.departmentID);
    return {
        firstName: p.firstName,
        lastName: p.lastName,
        location: location ? location.name : "",
        department: department ? department.name : ""
    };
}).subscribe((f) => {
    console.log(f);
});

// Option 2: all observables emit elements one by one.
// In this case we need to convert departments and locations to arrays.
o1 = Observable.from(persons);
o2 = Observable.from(departments);
o3 = Observable.from(locations);

o1.withLatestFrom(o2.toArray(), o3.toArray(), (p, d, l) => {
    // this part of code is exactly the same as in previous case.
    let location = l.find(c => c.locationID === p.locationID);
    let department = d.find(c => c.departmentID === p.departmentID);
    return {
        firstName: p.firstName,
        lastName: p.lastName,
        location: location ? location.name : "",
        department: department ? department.name : ""
    };
}).subscribe((f) => {
    console.log(f);
});

Answer 3

我认为RxJS .zip运营商可能是您的朋友。

据我了解，.zip就像这样......

.zip(
   Observable.from[array1].switchMap( // map to http response here ),
   Observable.from[array2].switchMap( // map to http response here ),
   Observable.from[array3].switchMap( // map to http response here )
).map((valueFromArray1, valueFromArray2, valueFromArray3) {
   // Create your object here 
})

这样的东西！希望，让你走上正确的轨道。

.zip应该在所有3个已经发出时第一次发出（当所有三个流都发出两次时它会发出第二次，等等） - 在你的场景中我希望所有三个流只发出一次，这使它成为一个.zip的简单案例

将多个可观察数组合并到新对象数组

3 个答案: