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.

My code so far:

interface User {
  id: number,
  name: string,
  email: string
}

interface UserWithPicture extends User {
  image: string[] | "",
}

interface ProfileImage {
  id: number,
  url: string
}

  tableData: UserWithPicture[];
  profileImage: ProfileImage[];

Both async functions return array of objects.

async ngOnInit() {
  this.tableData = await this.getUserDataService.fetchUsers().toPromise();
  const userID = this.tableData.map(u => u.userId);

  from(this.userProfilService.getUserProfileImage(userID))
    .pipe(takeUntil(this.destroy$),
      map(userProfileImages => userProfileImages.filter(user => user.id).map(upi => upi.url)))
    .subscribe(data => {
        this.userProfileImage = data;
      }
    })
}

I have tried to add the urls into tableData, but I cannot do that outside the relevant code block, it will always return undefined.

const newArr = this.tableData.map(v => Object.assign(v, {image: this.userProfileImage}))

How can I merge this.userProfileImage into the tableData object of arrays?