Extract Data Elements from 2 API

Asked

Viewed 222 times

0

The data of the two Apis comes in my console, the problem is that in the html in *ngFor it is only possible to scan the elements of the 1st subscribe that I store in dados, would like to store the data of the 2 api’s in order to use the data on the same screen, either in the same array or being able to bring the array I have already created in dados2..

Data List

private dados: Dados[];
private dados2: DadosComp[];

constructor(
  private dadosService: DadosService,
  private http: Http)
  {   }

  getListarDados(){       
    this.dadosService.listarDados()
      .subscribe(
         dados => {this.dados = dados

         for(let i=0; i < this.dados.length; i++){
           let userId = this.dados[i].userId;

           if (userId != null){
               this.dadosService.listarDemaisDados(userId)
               .subscribe(
                   dados2 => {this.dados2 = dados2
                  //mostra todos os dados do 1ºsubcribe
                  console.log(this.dados)
                  //mostra todos os dados do 2ºsubscribe baseado no userId do 1º subscribe
                  console.log(this.dados2)
                   },
                   error => this.msgErro = error             
               );  
           }
           else{userId = 9999;}
        }                        
 },
        error => this.msgErro = error             
            );                                   
    }

data-service.ts

// -------------- conexão com 1ª API 
listarDados(): Observable<Dados[]>{
    return this.http.get(this.API_URL, null)
            .map(res => res.json(),
                //this.listarDemaisDados(idUser)
            )
            .catch(this.httpUtil.processarErros);                
}  

// -------------- conexão com 2ª API 
private path: number;
listarDemaisDados(userId: number): Observable<Dados[]>{

    //this.httpUtil.url(this.loginUrl), params, this.httpUtil.headers()
    //console.log(userId);
    this.path = userId;

    let API2_URL: string = 'linkdinamico/' + this.path;

    return this.http.get(API2_URL, this.httpUtil.headers())
        .map(res => res.json())
        .catch(this.httpUtil.processarErros);    
}

html

<tr *ngFor="let dado of dados; ">

        <td>{{ dado.serverDate }} {{ dado.serverTimePrettyFirstAction }}</td>
        <td>{{ dado.totalAbandonedCartsRevenue }}</td>
        <td>{{ dado.totalAbandonedCartsItems }}</td>
        <td>{{ dado.userId  }}</td>


        <!-- ESTES  SÃO OS CAMPOS QUE VEM BASEADOS DA 2ª API (dados2 - do component) e não consigo trazer -->
        <td>{{ dado.dsResponsibleName }}</td>

        <!-- ESTES SÃO OS CAMPOS QUE VEM BASEADOS DA 2ª API (dados2 - do component) e não consigo trazer -->
        <td>{{ dado.dsResponsibleName }}</td>
                <!--{{ dado.nuPhone }}</td -->
        <td>


                <button type="button" class="btn btn-danger" 
                    data-toggle="modal" data-target="#modalExcluir"
                    (click)="excluir(aluno.id)">
                    Ações
                </button>
            </td>
    </tr>
angular typescript

  • the two arrays are the same size?

  • No, the first has 20 items due to paging, then I only carry 20 per page, the second array is already according to the size of the object, with all the JSON data.

  • then this will cause problems when showing the data of the second array. The second array is being populated and the only problem is to iterate over its elements?

  • That! I believe that iterating the elements of arrays I can call everything, right?

  • can, but there must be a relationship between the two arrays for you to know, given an element at a certain position in the first array, which element at which position of the second you want to access

  • Is there any light on how I link this array position to the data I want? This link is made in HTML or Component?

  • you can do <tr *ngFor="let dado of dados; let i = index;">. Then something like dados2[i]. I don’t know if this solves, since you said that the two arrays do not have the same size.

  • Let’s go continue this discussion in chat.

Show 3 more comments

1 answer

2

I found my mistake! I was losing the object data..

When iterating the data I changed the tb item and created another object and the data was lost, so not to lose I created another array 

private dados: Dados[]; 
private dados2: DadosComp[]; 
private dados3: Array<Dados>=[];

Then I put it inside mine subscribe who lists the details (dados2) the command push for the array I created called dados3 to popular with data from detail I created with the data from dados2

and finally in the html I called by going through the Detail, like this:

<tr *ngFor="let dado of dados3; let i = index;"> 
<td>{{ dado.serverDate }} {{ dado.serverTimePrettyFirstAction }}</td> 
<td>{{ dado.totalAbandonedCartsRevenue }}</td> 
<td>{{ dado.totalAbandonedCartsItems }}</td> 
<td>{{ dado.userId }}</td> 
<td>{{ dado.detail.dsResponsibleName }}</td> 
<td> ({{ dado.detail.nuPhoneDDD }}) {{ dado.detail.nuPhone }}</td> 
</tr>

Browser other questions tagged angular typescript

You are not signed in. Login or sign up in order to post.