I'm currently exploring how to retrieve JSON data from an API, parse it, map it to my custom type, and then showcase it in an Angular Material datatable. Despite my efforts, the console output indicates that the value is undefined. I haven't even reached the stage of setting up the datatable yet.
Could someone please point out where I might be making a mistake? My development environment is based on Angular 6.1.0:
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from '../../node_modules/rxjs';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'NgTable';
myPlace = "https://jsonplaceholder.typicode.com/posts";
myPosts: Observable<posts[]>;
myPostArr: posts[];
constructor(http: HttpClient){
this.myPosts = http.get<posts[]>(this.myPlace);
this.myPosts.subscribe(response => {this.myPostArr = response});
console.log(this.myPostArr);
}
}
export interface posts {
userId: number;
id: number;
title: string;
body: string;
}
The console log displays: undefined