I am encountering an issue while trying to access a json file using http get. The error message I receive is as follows:
Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.Any assistance in identifying the problem would be greatly appreciated.
import { Component } from '@angular/core';
import { Observable } from 'rxjs/Rx';
import { Http, Headers, RequestOptions, Response } from '@angular/http';
import { peopleService } from './PeopleService';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
//providers: [peopleService]
})
export class AppComponent {
//jsonFile: string = './EmployeeHeader.json';
empdata: Observable<Array<any>>[];
constructor(private http: Http) {
this.http.get('../assets/EmployeeHeader.json')
.map(Response => Response.json())
.subscribe(empdata => this.empdata = empdata, error => console.log(error));
//this.empdata = service.getPeople();
//console.log('Data is: ' + this.empdata);
}
}
Below is the HTML code for reference,
<tbody>
<tr *ngFor="let t of empdata">
<td>{{t.wwid}}</td>
<td>{{t.name}}</td>
<td></td>
<td></td>
<td></td>
<td>{{t.idsid}}</td>
<td></td>
</tr>
</tbody>
https://i.stack.imgur.com/o6SYB.png
Here is the JSON format of the code for your reference, though I am unsure if any issues are present within it:
{
"Employee":
[
{
"name": "Karthik Shekhar",
"wwid": "11597210",
"idsid": "kshekh1x",
"costCenterCode": "80790",
"mgrWWID": "10693268",
"orgUnit": "67926"
},
{
"name": "Aneesur Rahman",
"wwid": "11744439",
"idsid": "aneesurx",
"costCenterCode": "32406",
"mgrWWID": "10693268",
"orgUnit": "67926"
},
{
"name": "Ashutosh Pandey",
"wwid": "11691980",
"idsid": "ashuto3x",
"costCenterCode": "32406",
"mgrWWID": "10693268",
"orgUnit": "67926"
},
]
}