How to subscribe to an Observable and extract from an Object an Array of values

Question

I have a template that looks like this.

  <ng-container *ngIf="contactList$ | async as contactList">
    <ion-virtual-scroll [items]="contactList">
      <ion-item *virtualItem="let c" (click)="openProfile(c)">
        <ion-thumbnail slot="start">
          <img [src]="c.profilePicture" />
        </ion-thumbnail>
        <ion-label position="stacked">{{ c.lastNames }}, {{ c.firstNames }}</ion-label>
        <ion-label position="stacked">{{ c.mutualFriends[lastNames] }}</ion-label>
      </ion-item>
    </ion-virtual-scroll>
  </ng-container>

and depending on how I modify the subscription to an observable depends on weather or not I can see the Object of an Array's sub Array. In this example c.mutualFriends[name] is a sub Array that has additional information. mutualFriends is an Array of Objects (an example is below).

now in the component I was previously doing:

    this.contactService.getContacts().subscribe((users: Contact[]): void => {
      this.contactList = users;
    });

side note: I know that with this way you need to alter the template above in order not to get errors. in this case delete the <ng-container>

When getting the values this way the array of strings in c.mutualFriends[lastNames] will be listed. after subscribing to the observable this way:

this.contactList$ = this.contactService.getContacts();

inside the template the c.mutualFriends[lastNames] nothing is listed.

How can I render from the example below:

contact = {
  lastNames: 'Garcia Smith',
  firstNames: 'Gabriel',
  mutualFriends: [
    {
      lastNames: 'Llull',
      firstNames: 'Ramon',
      mutualFriends[],
    },
    {
      lastNames: 'Pereira dos Santos',
      firstNames: 'Joāo Maria',
      mutualFriends: [],
    }
  ],
};

in my template I want to see 'Llull, Pereira dos Santos' like I could with the first way of subscribing. I hope this was enough detail. thanks for your help!

Are the other infos shown? I.e.: does `c.profilePicture` outputs something? If you try to output the entire response as `{{contactList | json}}` or `{{c | json}}`, do you get something or an empty object? — Matteo Meil, Jul 03 '19 at 09:19

StepUp · Accepted Answer · 2019-07-03T18:00:46.997

2

You need to call subscribe() method. As subscribe() method is used to activate observable and to listen emitted values by observable.

this.contactList$ = this.contactService.getContacts()
    .subscribe((users: Contact[]) => {
      this.contactList = users;
    });

In addition, you have a choice to use pipe() operator. pipe() operator is used for chaining observable operators

this.contactList$ = this.contactService.getContacts()
    .pipe(
         map((res) => {      
             this.contactList = res.json();
         })
     );

edited Jul 03 '19 at 18:00

answered Jul 03 '19 at 09:21

StepUp

36,391
15
88
148

1

Thanks for the input. I thought that I could do it the simpler way since it is just fewer lines, but, sometimes there is just no getting around it. Thanks! – Ctfrancia Jul 03 '19 at 09:30

score 1 · Answer 2 · answered Jul 03 '19 at 09:23

Try ngFor to loop through the array

<ng-container *ngIf="contactList$ | async as contactList">
    <ion-virtual-scroll [items]="contactList">
      <ion-item *virtualItem="let c" (click)="openProfile(c)">
        <ion-thumbnail slot="start">
          <img [src]="c.profilePicture" />
        </ion-thumbnail>
        <ion-label position="stacked">{{ c.lastNames }}, {{ c.firstNames }}</ion-label>
        <ion-label position="stacked" *ngFor="let mutualFriend of c.mutualFriends">{{ mutualFriend.lastNames }}</ion-label>
      </ion-item>
    </ion-virtual-scroll>
  </ng-container>

You have to loop through the array and display the prams you want

thanks this works, I thought I could do something like this but I was hoping to get around _another_ for loop _inside_ a loop makes it harder to read. — Ctfrancia, Jul 03 '19 at 09:29

score 1 · Answer 3 · answered Jul 03 '19 at 09:25

1

You need to extract the values 'lastNames' from the array of objects 'mutualFriends' for more details,

From an array of objects, extract value of a property as array

answered Jul 03 '19 at 09:25

Sasi Kumar M

2,440
1
23
23

score 0 · Answer 4 · answered Jul 03 '19 at 09:19

mutualFriend is an array so you need to access the elements using index and not with string.

Try using:

c.mutualFriends[index].lastNames

where index is the loops index or use static values as 0,1...

Or You need to run loop on mutual friends to access all elements of mutual friends.

How to subscribe to an Observable and extract from an Object an Array of values

4 Answers4