rxjs combining 2 objects together from 2 different observables

Question

I have 2 observables that are listening for a database call respectively. I need to merge the 2 arrays together. If I have the following arrays

array1 = [{id: 1, content1: "string"}, {id: 2, content2: "string"}, {id: 3, content3: "string"}]
array2 = [{id: 1, contentX: "string"}, {id: 2, contentY: "string"}, {id: 3, contentZ: "string"}]

I want to merge them together so that I get a single observable array like this:

[{id:1, content1:"string", contentX:"string"}, {id:2, content2:"string", contentY:"string"}, {id:3, content3:"string", contentZ:"string"}]

I have some code but I'm really confused on how to proceed, I can't seem to find the right operators or chain them properly, does anyone have a good explanation on how to proceed? This is what I have so far, but literally don't know how to go on.

    const observable1 = getDataFromDb1();
    const observable2= getDataFromDb2();

    observable1 .pipe(
        combineLatest(observable2),
        flatMap(x => {
            //what to do here???
        })
    ).subscribe(
        (value)=>{
            console.log(value);
        }
    )

Thanks for your time

Answer 1

I'm taking a wild guess here, and assume that both source-observables emit their values in one big chunk. If that's the case, you simply want to map both emissions to a custom merged one (otherwise please leave a comment). Eg:

 const { of, combineLatest } = rxjs; const { map } = rxjs.operators; // simple merge-by-id const mergeById = ([t, s]) => t.map(p => Object.assign({}, p, s.find(q => p.id === q.id))); const db1$ = of([ {id: 1, content1: 'string'}, {id: 2, content2: 'string'}, {id: 3, content3: 'string'}, ]); const db2$ = of([ {id: 1, contentX: 'string'}, {id: 2, contentY: 'string'}, {id: 3, contentZ: 'string'}, ]); const all$ = combineLatest(db1$, db2$).pipe( map(mergeById) ); all$.subscribe(console.log); 

 <script src="https://unpkg.com/rxjs@6.2.1/bundles/rxjs.umd.min.js"></script>