so i have made a call to check and see if i return an object with actual data in it - I am not sure if i am doing this wrong but this is what i am trying.
Here is my get call i have made to my services - COMPONENT FILE:
resultData: any = [];
barChartLabels: any =[];
getData(){
this.dataService.getData().subscribe((data) => {
this.resultData = data;
for(let item of this.resultData) {
this.barChartLabels.push(item.name);
}
}
}
I am currently seeing this.resultData in my console but know after pushing item's name into another array which is used in binding in my html it is not being displayed.
Here is my service call - SERVICE FILE:
getData(){
return this.http.get('my url')
.map((res:Response) => res.json());
}
Here is also what i have in my json file:
[
{
"id": 1,
"name": "Test 1",
"score": 34
},
{
"id": 2,
"name": "Test 2",
"score": 92
}
]
This is my html:
<canvas baseChart [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" [chartType]="barChartType">
</canvas>
This may have transitioned into a different topic now.
If you really want it to be in the component, then the code needs to be in the body of the arrow function. Something like this:
getData(){
this.dataService.getData().subscribe(data => {
this.resultData = data;
for(let resultItem of this.resultData){
console.log(resultItem);
}
})
}
This is because the subscribe is asynchronous. When the getData method first runs, this.resultData has no value. It isn't until the Http response is returned that this.resultData is set.
You can use the do operator to see the data that is returned. You could try something like this:
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
...
getProducts(): Observable<IProduct[]> {
return this._http.get(this._productUrl)
.map((response: Response) => <IProduct[]> response.json())
.do(data => console.log('All: ' + JSON.stringify(data)))
.catch(this.handleError);
}