angular 9 subscribe null

Question

Product service:

   product:IProduct;
  products:IProduct[] = [];
  id:number;
  constructor(private productSevice:ProductService, private route: ActivatedRoute) { 

  }

  ngOnInit(): void {
    this.id= parseInt(this.route.snapshot.paramMap.get('id'));
     console.log(this.productSevice.products)

    this.productSevice.getById(this.id).subscribe(data => {
      this.product = data;
      console.log(data)

    })
console.log(this.product)
  }

product:

  product:IProduct = null;

  id:any;

it doesn't matter what i'm trying, product is null!

when i'm doing console.log in the subscribe i can see the data! but the product still null. | -> I tried that also onInit same result -<

Your console.log will always output null because you are not waiting for the async operation finish. Everything that depends on async outputs must be async. — Elias Soares, Jul 05 '20 at 13:37
Also next time try to proper format your code on the question. Use three `\`` in the line before and after your code to create a code block. — Elias Soares, Jul 05 '20 at 13:39
The function in the service doesn't seem to take any arguments but you're sending `this.id`. — Ramesh Reddy, Jul 05 '20 at 13:39
my bad getById(id:number):Observable{ return this.http.get(`${environment.api}${apiController.items}/${id}`); } — Vadim Tomashevsky, Jul 05 '20 at 13:42
@VadimTomashevsky - you should log the product inside the subscribe block — Ramesh Reddy, Jul 05 '20 at 13:46
i did and i showing the product from the server ! i can see the object. but after the block its null — Vadim Tomashevsky, Jul 05 '20 at 13:50
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/217253/discussion-between-vadim-tomashevsky-and-ramesh-reddy). — Vadim Tomashevsky, Jul 05 '20 at 14:32

Ramesh Reddy · Accepted Answer · 2020-07-05T15:45:57.923

  constructor(private productSevice:ProductService, private route: ActivatedRoute) { 

    this.id = this.route.snapshot.paramMap.get('id'); // line 'x'

    this.productSevice.getById(this.id).subscribe(data => {

      this.product = data; // line 'y'
    });

    console.log(this.product)   // line 'z'
 }

Line 'x' and 'z' execute first and at a later point of time when you get the response from the request the function passed to subscribe will be executed. So if you try to log the product outside this function you won't see data because this.product isn't assigned to it yet.

So you can check if this.product is assigned correctly inside the subscribe block.

  constructor(private productSevice:ProductService, private route: ActivatedRoute) { 
    this.id = this.route.snapshot.paramMap.get('id');
    this.productSevice.getById(this.id).subscribe(data => {
      this.product = data;
      console.log(this.product)
    });
 }

And sending HTTP requests in the constructor is not a good practice. Do this in the ngOnInit lifecycle hook.

ngOnInit - originally i did it on ngOnInit, but i also tried in the constructor. but still how do i get the data? i need a solution and not thing that i already know — Vadim Tomashevsky, Jul 05 '20 at 14:26

angular 9 subscribe null

1 Answers1