Merge multiple observed arrays into a new array of objects

Question

I have 3 observable arrays as shown 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"}]

I am trying to combine these 3 into the result below,

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

To get the desired result, I used the map function for the observed faces to give a new array of objects.

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

An object

PersonDetailIt has properties firstName, lastName, locationand department. How to search the departments observed and get the appropriate line for departmentIDto get the name of the department?

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

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

Observables department$ location$, filter(), . forkJoin() , . mergeMap() , forkJoin(). toArray() .

Observable.from(...) (, http.get(...)).

-: https://jsbin.com/nenekup/4/edit?js,console

: Observables

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 ( , ..). , ,