title: RxJs: merge stream data and a promise
body: <p>I would like to display users's data and their profile pictures. But I get the basic data and the profile pictures from 2 different services. What I would like to do, is to merge the pictures' url into my tableData.</p>
  <p>My code so far:</p>
  <pre><code>interface User {
    id: number,
    name: string,
    email: string
  }
  
  interface UserWithPicture extends User {
    image: string[] | &quot;&quot;,
  }
  
  interface ProfileImage {
    id: number,
    url: string
  }
  
    tableData: UserWithPicture[];
    profileImage: ProfileImage[];
  
  </code></pre>
  <p>Both async functions return array of objects.</p>
  <pre><code>
  async ngOnInit() {
    this.tableData = await this.getUserDataService.fetchUsers().toPromise();
    const userID = this.tableData.map(u =&gt; u.userId);
  
    from(this.userProfilService.getUserProfileImage(userID))
      .pipe(takeUntil(this.destroy$),
        map(userProfileImages =&gt; userProfileImages.filter(user =&gt; user.id).map(upi =&gt; upi.url)))
      .subscribe(data =&gt; {
          this.userProfileImage = data;
        }
      })
  }
  
  </code></pre>
  <p>I have tried to add the urls into tableData, but I cannot do that outside the relevant code block, it will always return undefined.</p>
  <pre><code>const newArr = this.tableData.map(v =&gt; Object.assign(v, {image: this.userProfileImage}))
  </code></pre>
  <p>How can I merge this.userProfileImage into the tableData object of arrays?</p>