How can I combine two data stores in angular?

Question

I have this service that gets a list of objects from a django rest api.

import {Injectable} from '@angular/core';
import {Headers, Http} from '@angular/http';
import 'rxjs/add/operator/toPromise';
import 'rxjs/add/operator/map';
import {environment} from '../../../environments/environment';
import {Delegation} from "../delegations/delegation";

@Injectable()
export class DelegationsService {

  private headers = new Headers({'Content-Type': 'application/json'});

  constructor(private http: Http) { }

  getDelegations(userid: number)  {
    return this.http.get(environment.apiUrl + '/api/v1/delegations/' + userid )
      .map(res => <Delegation[]>res.json());
  }
}

The contents of ../delegations/delegation.ts is:

export class Delegation {
  id: number;
  delegator: number;
  delegatee: number;
}

The numbers for the delegator and delegatee are the database id for "Users". I need to display the actual users' names and login ids which are available via another REST API url. I thought I could modify the ../delegations/delegation.ts to be something like this:

export class Delegation {
  id: number;
  delegator: number;
  delegator_login: string;
  delegator_name: string;
  delegatee: number;
  delegatee_login: string;
  delegatee_name: string;
}

Then I would iterate over elements I get from this.http.get(environment.apiUrl + '/api/v1/delegations/' + userid ) call and make a request for the user info, but I have no clue how to do iterate of the result set.

UPDATE:

Currently I can dump the delegator data to my delegations.component.html template and web page displays:

2 | 97597 | 5197 
4 | 97597 | 9757

What I want to display is:

2 | Sam Smith (ssmith) | Lisa Butts (lbutts) 
4 | Sam Smith (ssmith) | Bill Fatlips (bfatlips)

My delegations.component.html is very simple:

<ul class="delegations">
  <li *ngFor="let delegation of delegations" [class.selected]="delegation === selectedDelegation" (click)="onSelect(delegation)">
    <span class="badge">{{delegation.id}}</span> | {{delegation.delegator}} | {{delegation.delegatee}}
  </li>
</ul>

It is pretty much what they have in the Heroes Angular tut: https://angular.io/tutorial/

so basically you need to display the data which you are getting from API? — Hrishikesh Kale, Feb 14 '18 at 05:51
Well the data I get is just database record id's. I need to take those id's are look up the actual user names instead of just the id of their db record. — Red Cricket, Feb 14 '18 at 05:52
I am sorry i not getting you what do mean by ". I need to take those id's are look up the actual user names instead of just the id of their db record." — Hrishikesh Kale, Feb 14 '18 at 05:54
I am sorry. I will update my question to make it more clear what I am trying to do. — Red Cricket, Feb 14 '18 at 06:01
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/165105/discussion-between-hrishikesh-kale-and-red-cricket). — Hrishikesh Kale, Feb 14 '18 at 06:17
Create an array of Observables and use forkJoin https://stackoverflow.com/questions/42334469/observable-forkjoin-with-a-for-loop?rq=1 — Eliseo, Feb 14 '18 at 08:32

score 0 · Answer 1 · answered Feb 14 '18 at 18:43

Try doing this:

getDelegations(userid: number)  {
    return this.http.get(environment.apiUrl + '/api/v1/delegations/' + userid )
      .map(res => {
        const theList = <any[]>res.json();
        theList.forEach(item => {
          this.http.get(environment.apiUrl + '/api/v1/delegaor/' + item.delegator)
              .map(res2 => {
                const delegator = res2.json();
                item.delegator_login = delegator.login;
                item.delegator_name = delegator.name;
              });
          this.http.get(environment.apiUrl + '/api/v1/delegatee/' + item.delegatee)
              .map(res3 => {
                const delegatee = res3.json();
                item.delegatee_login = delegatee.login;
                item.delegatee_name = delegatee.name;
              })
        })
        return theList;
      } )
      .subscribe(finalList => {
        // this finalList is your delation list with names and logins and ids
      });
  }

I'm a little worried that finalList will be returned before the inner api calls are made, but I think the subscribe will wait for it all to finish up before it is returned. This solution of course is assuming you add the strings to your delegation class.

nice! But I have been able to convince the back end developers make a change so that I will get all the info I need to display in my initial API request. They were concerned with performance issues related to the potential numerous API requests. — Red Cricket, Feb 14 '18 at 18:51
That'd be the best solution, getting it all returned from the original call. Wasn't sure if you were consuming an API that you had no control over — Kevin, Feb 14 '18 at 20:51

How can I combine two data stores in angular?

1 Answers1