CODEWITHSUNDEEP
angularobservable
hy c
hy c

Reputation: 115

Angular: I can get the object from Service, but it seems I did not assign an object properly

Component:

import { Component, OnInit } from '@angular/core';
import { ItemsService } from '../items.service';
import { Observable } from 'rxjs';
import { Item } from '../item.model';
import { ActivatedRoute } from '@angular/router';


@Component({
  selector: 'app-customer',
  templateUrl: './customer-detail.component.html',
  // styleUrls: ['./customers-table.component.css'],
  providers: [ItemsService],
})
export class CustomerDetailComponent implements OnInit {
  customer: Item;
  constructor(private _itemsService: ItemsService, private route: 
ActivatedRoute) {
  }

ngOnInit() {
    console.log(this.getDataFromService().subscribe(data => 
console.log(data)));
    this.getDataFromService().subscribe(data => this.customer = data);
    console.log(this.customer);
  }

  public getDataFromService() {
    const id = +this.route.snapshot.paramMap.get('id');
    const paraid: string = String(id);
    return this._itemsService.getItem(paraid);
  }

}

Service:

@Injectable()
export class ItemsService {

  private BASE_URL = 'http://localhost:3000/api/';

  constructor(private http: HttpClient) { }

  // Uses http.get() to load data from a single API endpoint
  getItem(id: String): Observable<Item> {
    console.log('getItem: ' + id);
    return this.http.get<Item>(`${this.BASE_URL + id}`);
  }

From the console log I've got this:

Subscriber {closed: false, _parent: null, _parents: null, 
_subscriptions: Array(1), syncErrorValue: null, …}

[{…}]
0
:
{CustomerID: 1000, FirstName: "Suzanne", LastName: "Jones", BirthDate: 
"1999-01-01"}
length
:
1
__proto__
:
Array(0)

I have an item to fetched from API endpoint, which will get the item by SQL query from the database, I have succeeded to get the data as I can console.log(data). but I can't console.log(this.customer), did I do something wrong in data => this.customer = data?

Upvotes: 2

Views: 59

Answers (2)

Shashikant Devani
Shashikant Devani

Reputation: 2454

OffCourse you will not get data in to your console.

because it will take time to fetch data and when you subscribe your function, it will go to fetch data, your outside console will be called.

Use settimeout(()=> {}, 1000) like this:

ngOnInit() {
    console.log(this.getDataFromService().subscribe(data => 
console.log(data)));
    this.getDataFromService().subscribe(data => this.customer = data);
settimeout(()=> {  console.log(this.customer); }, 1000);
  }

Upvotes: 0

Sajeetharan
Sajeetharan

Reputation: 222582

First of all you are not calling the method from the service, you need to use

this._itemsService.getDataFromService()

and You are getting data from an API asynchronously and trying to access it before the response, place the console.log inside the subscribe,

this._itemsService.getDataFromService().subscribe((data) =>  { 
   console.log(data)
   this.customer = data;
   console.log(this.customer);
});

Upvotes: 3

Related Questions