calling a method inside a subscribe function is not waiting to get the result in angular 4

Question

I am very new in angular 4. I am fetching a result set using a subscribe method and inside that I need to call another method to manipulate the first result set. But before getting the second result set, the process is getting completed.

My code in component.ts is

workItems: IGeneratedTasks[];
this._taskManagementService.getAllWorkItems()
  .subscribe(workItems => {
    this.workItems = [];
    if (workItems != null)
      workItems.forEach(result => {            

        this._taskManagementService.hasAttachment(result.id).subscribe(count => {
          console.log(count);
          if (count > 0)
            result.hasAttachment = true;  //hasAttachment is a property in IGeneratedTasks
        });         


        console.log(result.hasAttachment);


      });
    this.workItems = workItems;

  },
  error => this.errorMessage);

my service.ts is

getAllWorkItems(): Observable<IGeneratedTasks[]> {       
    return this._http.get(this._workItemUrl)
        .map(res => res as IGeneratedTasks[] || [])
        .map(tasks => tasks.map(this.generatedTasksService.toGeneratedTasks))
        .catch(this.handleError);
}

 hasAttachment(id:Number): Observable<number> {       
    let myHeaders = new HttpHeaders();
    myHeaders.append('Content-Type', 'application/json');
    let myParams = new HttpParams();
    myParams = myParams.append('workItemId',id.toString());

    return this._http.get(this._hasAttachmentUrl,{ headers: myHeaders, params: myParams })
        .map(res => res)           
        .catch(this.handleError);
}

Am I calling the methods in the right way?

Small change after the suggestions,

this._taskManagementService.getAllWorkItems()

  .subscribe(workItems => {
    this.workItems = [];
    let newWI: IGeneratedTasks[] = [];
    if (workItems != null) {
      workItems.forEach(result => {
        result.isOverDue = result.duedate != null && result.duedate < (new Date()) && result.overallstatus != "4";
        workItems.forEach(result => {
          this._taskManagementService.hasAttachment(result.id).subscribe(count => {
            if (count > 0) {
              result.hasAttachment = true;
            }
            newWI.push(result);
          });

        })
      });

    }
 this.workItems = newWI;

    },
  error => this.errorMessage);

I have a similar call like hasAttachment

  this._taskManagementService.hasNote(result.id).subscribe(count => {
            if (count > 0) {
              result.hasNote = true;
            }                
          });

Where do I add this, so that the final dataset contains both the hasAttachment and hasNote.

The `hasAttachment` is only available in the **subscribe** (due to **Async**) the console.log need to be in the subscribe to, otherwise it wil give **undefined**. Try to set your log inside the subscribe. `result.hasAttachment = true; console.log(result.hasAttachment); });` — Swoox, Oct 10 '17 at 13:07
@Swoox hasAttachment is a property of my dataset and I am setting that value. So its should show the outside the subscribe also, shouldn't it? — Ajoe, Oct 10 '17 at 13:13
@Swoox you are correct. adding the result to a new array newWI.push(result); gave me the result. One more doubt, if I have a similar subscribe like hasAttachment (say, hasNote).How do I do both together ? — Ajoe, Oct 10 '17 at 14:12
You can wait for completion then get the other one. Read https://stackoverflow.com/questions/34671715/angular2-http-get-map-subscribe-and-observable-pattern-basic-understan `.subscribe( function(response) { console.log("Success Response" + response)}, function(error) { console.log("Error happened" + error)}, function() { console.log("the subscription is completed")} );` — Swoox, Oct 10 '17 at 14:18
@Swoox I have made some changes in my questions,can you please have a look — Ajoe, Oct 10 '17 at 14:21
You wait for one to complete and then add the other one you can push it even in different arrays. Up to your implementation. — Swoox, Oct 10 '17 at 14:24
hasAttachments portion is working fine for me. ie the new value is updated in the array 'newWI'. — Ajoe, Oct 10 '17 at 14:26
You really have to program it yourself I only give advise in the right way ;) Not going to do the work for you sorry. — Swoox, Oct 10 '17 at 14:27
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/156370/discussion-between-a-a-and-swoox). — Ajoe, Oct 10 '17 at 14:36

score 1 · Accepted Answer · answered Oct 11 '17 at 04:04

I resolved my issue, the code is

this._taskManagementService.getAllWorkItems()

  .subscribe(workItems => {
    this.workItems = [];
    let newWI: IGeneratedTasks[] = [];
    if (workItems != null) {
      workItems.forEach(result => {
        result.isOverDue = result.duedate != null && result.duedate < (new Date()) && result.overallstatus != "4";
        workItems.forEach(result => {
          this._taskManagementService.hasAttachment(result.id).subscribe(count => {
            if (count > 0) {
              result.hasAttachment = true;
            }
          });
          this._taskManagementService.hasNote(result.id).subscribe(count => {
            if (count > 0) {
              result.hasNote = true;
            }                
            newWI.push(result);
          });
        })
      });
    }
    this.workItems = newWI;

  },
  error => this.errorMessage);

calling a method inside a subscribe function is not waiting to get the result in angular 4

1 Answers1