Me gustaría mostrar los datos de los usuarios y sus fotos de perfil. Pero obtengo los datos básicos y las imágenes de perfil de 2 servicios diferentes. Lo que me gustaría hacer es fusionar la URL de las imágenes en mi tableData.

Mi código hasta ahora:

 interface User { id: number, name: string, email: string } interface UserWithPicture extends User { image: string[] | "", } interface ProfileImage { id: number, url: string } tableData: UserWithPicture[]; profileImage: ProfileImage[];

Ambas funciones asíncronas devuelven una matriz de objetos.

 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; } }) }

Intenté agregar las URL en tableData, pero no puedo hacerlo fuera del bloque de código relevante, siempre devolverá undefined.

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

¿Cómo puedo fusionar this.userProfileImage en el objeto tableData de las matrices?