How to get the json data outside of the subscribe method

Question

I got the json data from the backend, and I want to save the data in a variable so I can fill out a table with them. Here is my code:

@Component({
  selector: 'app-kontakte',
  templateUrl: './kontakte.component.html',
  styleUrls: ['./kontakte.component.scss'],
})
export class KontakteComponent implements OnInit {

  textArea: string;
  minlength: number;
  maxlength = 100000;

  constructor(private kontakteService: KontakteService) {
    this.textArea = '';
    this.minlength = 1;
  }
  
  ngOnInit(): void {
    this.reload();
  }

  public reload():void {
    this.kontakteService.getTpoContacts().subscribe((res) => {
      this.textArea = JSON.stringify(res);
      console.log(this.textArea); // <-- here I get the data as output
    });
    console.log(this.textArea) // <- here I get a blank string 
  }
}

I wanted to save the json data inside the textArea variable. Then use the data to fill out a tabe. Inside the subscription I get the data which is correct, but outside of it the this.textArea is blank.

Any suggestion how I could solve this? I'm very new to angular.

It is working as expected. The execution of getTpoContacts is asynchronous. Then, when you subscribe for the results, the data is available. But the last line of reload function is executed without waiting that this.kontakteService.getTpoContacts() ends. — Alan De Renzis, Aug 06 '21 at 18:56
Yes I understand that is is asynchronous, but is there a way to somehow read the data outside of the method? Like to save them in a variable or something — dernor00, Aug 06 '21 at 18:59
@R.Richards thanks for the link, it didn't answer my question. — dernor00, Aug 06 '21 at 18:59
There isn't an answer to your question aside from "you can't". — Kelvin Schoofs, Aug 06 '21 at 19:03
The only way to read the data outside the subscribe function is to wait that it ends. I recommend that you save the data in the variable inside the subscribe function. You could convert the subscription to a Promise using .toPromise() after subscribe and then use async-await, but it just would be a different way to do the same: wait that the getTpoContacts returns the data. — Alan De Renzis, Aug 06 '21 at 19:07
@AlanDeRenzis do you have an example for this? Maybe this would work, I don't mind the wait — dernor00, Aug 06 '21 at 19:09

score 0 · Answer 1 · edited Aug 06 '21 at 19:20

You're already saving your results to a variable with this line of code:

this.textArea = JSON.stringify(res);

As soon as your async method completes, this.textArea will have what you need. Your problem is that you're trying to access it before it comes back from your service:

public reload(): void {

    this.kontakteService.getTpoContacts().subscribe((res) => {
        // this won't run until the service method getTpoContacts() completes.
        this.textArea = JSON.stringify(res);
        console.log(this.textArea); // <-- here I get the data as output
    });

    // this runs immediately because the service call above doesn't block execution
    console.log(this.textArea) // <- here I get a blank string 
}

So don't do that.

How to get the json data outside of the subscribe method

1 Answers1