Angular2 : Read JSON file using http get

Question

I am trying to read a json file using http get but I am getting below error.

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

please help me on what is wrong.

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);
}
}

Adding the HTMl part below 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>

JSON format of the code for your reference and I am not sure if any issue with this

   {
"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"
  },
]
}

This is because ngFor binds to iterables like arrays and not an object. One of the workaround can be: this.empdata = [empdata]. However there can be alot better solution than this. Also if you can share you response that you are getting from the API and your html ngFor structure? — Aakash Thakur
– Aakash Thakur, Commented Jul 12, 2017 at 7:08
Can you share your folder structure. I think your http get request executed with 404 and *ngFor didn't receives expected array so it throws error — Arun Redhu
– Arun Redhu, Commented Jul 12, 2017 at 7:08
mmm .. ican you post your EmployeeHeader.json ..and can you try to set empdata: Array<any>=[] — federico scamuzzi
– federico scamuzzi, Commented Jul 12, 2017 at 7:09

CozyAzure · Accepted Answer · 2017-07-12 07:28:02Z

2

Your empdata was an object, not an array. You need to access the Employee property in your object:

constructor(private http: Http) {
    this.http.get('../assets/EmployeeHeader.json')
        .map(Response => Response.json())
        .subscribe(empdata => {
            //access Employee property
            this.empdata = empdata.Employee
        }, error => console.log(error));
}

answered Jul 12, 2017 at 7:28

CozyAzure

8,4987 gold badges39 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Aneez Over a year ago

Any idea how to get this json data bind to autocomplete input field based on drop down. For example, if I choose name in the drop down, it should display all Employee.name values. wwid should show all Employee.wwid value, etc.

Arun Kumaresh · Accepted Answer · 2017-07-12 07:33:11Z

0

change your service like below

  this.http.get('../assets/EmployeeHeader.json')
            .map(Response => Response.json())
            .subscribe(empdata => {this.empdata = empdata.Employee}
    , error => console.log(error));

or change the *ngFor to

<tbody>
<tr *ngFor="let t of empdata.Employee">
<td>{{t.wwid}}</td>
<td>{{t.name}}</td>
<td></td>
<td></td>
<td></td>
<td>{{t.idsid}}</td>
<td></td>
</tr>
</tbody>

answered Jul 12, 2017 at 7:33

Arun Kumaresh

6,2966 gold badges36 silver badges50 bronze badges

3 Comments

Aakash Thakur Over a year ago

In html, reference to Employee is not needed as you have already assigned that in subscribe call.

Arun Kumaresh Over a year ago

if it is not assigned then it is needed that's why i have mentioned or in my answer

Aakash Thakur Over a year ago

Oh ok. I thought html was added in continuation.

Collectives™ on Stack Overflow

Angular2 : Read JSON file using http get

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related