CODEWITHSUNDEEP
angularsubscribengoninit
Devozor92
Devozor92

Reputation: 33

Can't get value in ngoninit on subscribe angular

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"
}

Upvotes: 2

Views: 2968

Answers (2)

Ganesh
Ganesh

Reputation: 6016

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.. :)

Upvotes: 4

Must.Tek
Must.Tek

Reputation: 1370

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 
  }

Upvotes: 1

Related Questions