Subscribe return undefined at the first time

Question

I know that problem that view trying to get data before it filled up. But don't know how to fix this. At the first time subscribe return nothing to the view, at the second - data from first request etc. I used this construction in the project many times, and this is the first one with such interesting result. IN the code below used POST methods.

Here is my code:

private findOtherAddresses(person: any, address: Address) {
       this.scoredAddresses = [];    

       this.addressParam.person = person;                    
       this.addressParam.address = address;   
       this.Service.findOtherPersonAddresses(person).subscribe(                          //look for other person addresses 
           adr => {
               this.similarAddresses = adr;
           })

       this.Service.getScores(this.addressParam).subscribe(res  => {          //get score for other addresses
           this.adressScore = res;
           this.similarAddressPersonId = person;
           this.addressForReplaceId = address.id;
       })

       for (let address of this.similarAddresses) {                                  //restrict addresses and scores
           for (let score of this.adressScore) {
               let scoredAddress = new ScoredAddress;                               
               if (address.id == score.id) {
                   scoredAddress.scoredAddress = address;
                   scoredAddress.addressScore = score.result;
                   this.scoredAddresses.push(scoredAddress);
               }
           }
       }
   }

View:

    <div  *ngIf="(scoredAddresses != null)">
                <div>
                    <label *ngIf="(address.person == similarAddressPersonId) && (address.id == addressForReplaceId)">Other addresses: </label>
                    <p-dataTable *ngIf="(address.person == similarAddressPersonId) && (address.id == addressForReplaceId)" [value]="scoredAddresses">
                        <p-column >
                            <template let-item="rowData" pTemplate="body">
                                {{item.addressScore}}
                            </template>
                        </p-column>
                        <p-column>
                            <template let-item="rowData" pTemplate="body">
                                {{item.scoredAddress}}
                            </template>
                        </p-column>
                    </p-dataTable>
                </div>
            </div>

Please, help me to solve this self-created issue(((. I'll also appriciate for advice how to avoid this in the future.

You are doing an async operation. You need to do your logic inside the subscribe block. — eko, Dec 21 '17 at 08:53
@echonax As I understand i need another subscribe, where will be all my logic. The third one? — Antatrix, Dec 21 '17 at 09:10
Hmm, in this specific case, I would use `forkJoin` to combine your observables. Check this answers second part: https://stackoverflow.com/questions/36712659/angular-2-two-backend-service-calls-on-success-of-first-service/36712707#36712707 — eko, Dec 21 '17 at 09:20
@echonax looked at it... now has the next problem. "property 'forkJoin' does not exist on type 'typeof Observable'". Import it in two ways `import { Observable } from 'rxjs/Rx';` and `import { Observable } from 'rxjs/Observable'; import 'rxjs/add/observable/forkJoin';` With no result — Antatrix, Dec 21 '17 at 09:41
@echonax is there any another way to rewrite my code without forkJoin? — Antatrix, Dec 21 '17 at 09:52
Idk why it didn't work, maybe you need to restart your IDE or something. Anyway, you can do it with flatMap/mergeMap also. The thing is you have 2 async operations. It is not guaranteed that first one will always happen first. You can also use async-await but what if your async operation takes 30 seconds? The simplest way I can think of is that move `getScores` inside `findOtherPersonAddresses`'s subscribe block. And move the for loop inside `getScores` subscribe block. See if that works. — eko, Dec 21 '17 at 10:12

Subscribe return undefined at the first time

0 Answers0