Jak poprawnie odczytać listę obiektów JSON w Angular 6

Question

Chcę pobrać listę obiektów JSON i zmapować ją na własny typ w celu prezentacji w tabeli. Dane pobieram z RESTapi z serwera na localhoście, postman i przeglądarka poprawnie je interpretuje, niestety Angular jakby nie widział tych danych (dostaję undefined).
Podstawy http w Angular czerpałem stąd: Angular docs i analogicznie utworzyłem model i serwis.

W celach testowych korzystałem z serwisu jsonplaceholder i tu udaje mi się poprawnie pobrać i wyświetlić dane, jednak problem jest przy pobieraniu danych z localhosta.

Mój plik serwisu:

const httpOptions = {
    headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

export class OrdersService {
    readonly GET_ORDERS = 'http://localhost:8080/PDS/orders/';
    readonly EXAMPLE_URL = 'https://jsonplaceholder.typicode.com';

    constructor(private http:HttpClient) {
    }
 
    // Uses http.get() to load data from a single API endpoint
    getPosts() : Observable<Post[]> {
        return this.http.get<Post[]>(this.EXAMPLE_URL + '/posts');
    }

    getOrders() : Observable<Order[]> {
        return this.http.get<Order[]>(this.GET_ORDERS, httpOptions);
    }
}

Fragment wyświetlanego komponentu:

orders: Order[];

posts: Post[];

getOrders() {
    this.ordersService.getOrders().subscribe(
      orders => this.orders = orders
    );
}

Oraz model typu Order:

export interface Order {
    id: number;
    userId: number;
    pizzasId: number;
    status: string;
    date: Date;
}

 

Answer 1

a gdzie wołasz tą metodę getOrders() w komponencie ?

Comments

ngOnInit() {
    this.getOrders();
}

 

Answer 2

Problemem był typ danych w interfejsie Order

zamiast:

date: Date

powinno być:

date: string

a następnie należy sparsować dopiero datę na odpowiedni typ ts.