Can't get value in ngoninit on subscribe angular

Question

I don't understand why my object is always "undefinned" on ngoninit on angular. I request on my api project i get my response correctly. When I console.log my object is not defined (ngoninit) but in other function i can get values.

My questions is why and how can i do to get my object in ngoninit.

Thank you

I retrieve my response correctly on postman others functions retrieve too

Service:

getById(id:string):Observable<Grower>{
   return this.http.get<Grower>(`${environment.apiUrl}/growers/${id}`);
}

View model:

export class GrowerDetails {

    adress:string;
    zip:string;
    city:string;
}

Component:

  growerService:GrowerService;

  detailsProfil: GrowerDetails;

  constructor(private authenticationService: AuthenticationService, growerService:GrowerService,
    private formBuilder:FormBuilder) { 
      this.growerService = growerService;
   }

  ngOnInit() {
    this.detailsProfil = new GrowerDetails();

    this.growerService.getById(this.decoded.nameid).subscribe(
      (data:Grower) => this.detailsProfil = {
            adress: data.adress,
            city: data.city,
            zip : data.zip

      },
      error => console.log(error) 
    );
console.log(this.detailsProfil); // undefinned

onSubmit(){
    console.log(this.detailsProfil); // ok
 }

Postman:

{
    "lat": 0,
    "long": 0,
    "description": "test",
    "adress": "test",
    "zip": "test",
    "city": "test"
}

Possible duplicate of [How do I return the response from an Observable/http/async call in angular2?](https://stackoverflow.com/questions/43055706/how-do-i-return-the-response-from-an-observable-http-async-call-in-angular2) — ConnorsFan, Jan 11 '19 at 12:50
because your subscribe is async, you can console inside of subscribe, you will see the data — fsi, Jan 11 '19 at 12:50
`(data:Grower) => { this.detailsProfil = {...}; console.log(...); }` — ConnorsFan, Jan 11 '19 at 13:03
that's mean i can't work with my object outside the subscribe in ngoninit ? — Devozor92, Jan 11 '19 at 13:05
Outside, yes, but after the observable callback has been executed. If you keep the two `console.log` statements, you will see that your original statement is called before the subscribe callback. See the duplicate question/answer for more details. — ConnorsFan, Jan 11 '19 at 13:11

Ganesh · Accepted Answer · 2021-04-26T12:05:12.287

We can have the value of detailsProfil inside the subscription but not outside of it. Because getById() is an async call so, won't wait for subscribe to finish before it executes.

Do some changes like below,

 constructor(private authenticationService: AuthenticationService, growerService:GrowerService,
    private formBuilder:FormBuilder) { 
      //  this.growerService = growerService;  <- this line not required
   }

  ngOnInit() {
    this.detailsProfil = new GrowerDetails();

    this.growerService.getById(this.decoded.nameid).subscribe((data) => {
       console.log(data);            
       this.detailsProfil.adress = data.adress;
       this.details.city = data.city;
       this.details.zip = data.zip;
     },
      error => console.log(error));
     console.log(this.detailsProfil); // you will get detailsProfil Object
  }

Happy Coding.. :)

ok it works. i don't know why in the doc they say like this : .subscribe((data: Config) => this.config = { heroesUrl: data['heroesUrl'], textfile: data['textfile'] }); — Devozor92, Jan 11 '19 at 13:20

score 0 · Answer 2 · answered Jan 11 '19 at 13:14

It's undefined because you don't have the data yet.

     ngOnInit() {
        this.detailsProfil = new GrowerDetails();

        this.growerService.getById(this.decoded.nameid).subscribe(
          (data:Grower) => {
             this.detailsProfil = {adress: data.adress,city: data.city,zip : data.zip };

             console.log(this.detailsProfil); // you can access here because you got it now.
          },
          error => console.log(error) 
        );

    console.log(this.detailsProfil); // you can't access here. it's still undefined 
  }

Can't get value in ngoninit on subscribe angular

2 Answers2