Not able to loop through JSON object on table in Angular 6

I have JSON Object as below received from GET REST call.

[
{
    "driverName": "Bob",
    "customerName": "-",
    "status": "AVAILABLE"
},
{
    "driverName": "Harry",
    "customerName": "-",
    "status": "AVAILABLE"
},
{
    "driverName": "Peter",
    "customerName": "-",
    "status": "AVAILABLE"
},
{
    "driverName": "John",
    "customerName": "-",
    "status": "AVAILABLE"
},
{
    "driverName": "Rob",
    "customerName": "-",
    "status": "AVAILABLE"
}

]

I want to iterate on this and display them all in table format. I have my code for this is as below.

AppComponent.ts

driverStatusResponse: any[] = []; 

AppService.ts

getDriverStatus():Observable<any>{
var httpUrl = this.baseURL+"driverstatus/";
  return this._http.get(httpUrl)
        .pipe(map((response: Response) => <any> response.text()));

}

And component's html :

<tbody bgcolor="#b3ecff">
    <tr *ngFor="let driver of driverStatusResponse">
      <td>{{driver.driverName}}</td>
      <td>{{driver.customerName}}</td>
      <td>{{driver.status}}</td>
    </tr>
  </tbody>

I am getting error in console as below :

AppComponent.html:24 ERROR Error: Error trying to diff '[{"driverName":"Bob","customerName":"kushhs","status":"BUSY"},{"driverName":"Harry","customerName":"aSdjb","status":"BUSY"},{"driverName":"Peter","customerName":"aSdjb","status":"BUSY"},{"driverName":"John","customerName":"zdgf","status":"BUSY"},{"driverName":"Rob","customerName":"asdfsg","status":"BUSY"}]'. Only arrays and iterables are allowed
at DefaultIterableDiffer.push../node_modules/@angular/core/fesm5/core.js.DefaultIterableDiffer.diff (core.js:6194)
at NgForOf.push../node_modules/@angular/common/fesm5/common.js.NgForOf.ngDoCheck (common.js:3386)
at checkAndUpdateDirectiveInline (core.js:10100)
at checkAndUpdateNodeInline (core.js:11363)
at checkAndUpdateNode (core.js:11325)
at debugCheckAndUpdateNode (core.js:11962)
at debugCheckDirectivesFn (core.js:11922)
at Object.eval [as updateDirectives] (AppComponent.html:35)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:11914)
at checkAndUpdateView (core.js:11307)

Please help me resolve this.

htmljsonangularloopstypescript

Answers

answered 4 months ago Abel Valdez #1

Possibly your HTTP API is returning an object {} - ngFor requires an array [] to iterate.

Change your API to produce an array, or transform the object in your component.

Take a look if you API response start with {}.

OBJECT

{[
    {
        driverName: "John",
        customerName: "-",
        status: "AVAILABLE"
    }    
]}

ARRAY

[{
   driverName: "John",
   customerName: "-",
   status: "AVAILABLE"
}]

answered 4 months ago Kushal Sethi #2

After trying out different things with the code, I found an answer. The mistake was in the service call. The modified code that gives the correct array to iterate on it is,

getDriverStatus():Observable<any[]>{
    var httpUrl = this.baseURL+"driverstatus/";
      return this._http.get(httpUrl)
            .pipe(map((response: Response) => <any[]> response.json()));
}

This gives response body as json array.

comments powered by Disqus