Error trying to diff '[object Object]' in Angular

Question

Looks like something wrong with freight variable in HTML:

Error in app/freightList.component.html:13:8 Error trying to diff '[object Object]'

Below is code

freight.service.ts
=======================

    getFreight (): Promise<Freight[]> {
        return this.http.get(this.freightUrl)
                  .toPromise()
                  .then(this.extractData)
                  .catch(this.handleError);
    }

  private extractData(res: Response) {
      let body = res.json();
      return body || { };
  }

freightList.component.ts
========================
    getFreight() {
        this.freightService
            .getFreight()
            .then(freight => this.freight = freight)
            .catch(error => this.error = error); // TODO: Display error message
    }

freightList.component.html
============================

       <tr *ngFor="let frght of freight">
       <td>{{frght.grp}} - {{frght.grpname}}</td>
       <td>{{frght.subgrp}} - {{frght.subgrpname}}</td>
       <td>{{frght.prodno}} - {{frght.prodname}}</td>
       <td>{{frght.percent}}</td>
       <td>{{frght.effective_date}}</td>
       <td><button (click)="deleteFreight(frght, $event)" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-remove"></span> Remove</button></td>
       <td><button (click)="editFreight(frght)" class="btn btn-warning btn-sm"><span class="glyphicon glyphicon-edit"></span> Edit</button></td>
       </tr>

Response body
==================

    [{
        "effective_date": "01/01/2016",
        "grp": "01",
        "grpname": "STOPS/FLEX HOSES/COVER PLATES",
        "id": "1",
        "percent": "10",
        "prodname": "DWV PVC PIPE 100MM X 6MTR SN6  SWJ",
        "prodno": "1400200",
        "subgrp": "02",
        "subgrpname": "DWV PIPE - UP TO 150MM"
    }, {
        "effective_date": "01/02/2016",
        "grp": "01",
        "grpname": "STOPS/FLEX HOSES/COVER PLATES",
        "id": "2",
        "percent": "11",
        "prodname": "PVC PIPE    100MM X 6MTR SWJ SN10",
        "prodno": "1400201",
        "subgrp": "03",
        "subgrpname": "DIMPLEX BATHROOM ACCESSORIES"
    }]

Fraga

Answer 1

Your extractData (and possibly also your HTTP API) is returning an object {} - ngFor requires an array [] to iterate.

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

Rezzani

how do you do that in the service? – Mismate

Change return body || { }; to return body || []; for the empty result case; otherwise it would depend on what the freightUrl http get is producing. It should produce an array of these freight objects. – Rezzani

Answer 2

The problem (for me) was in my newState definition. Below is the correct definition:

const newState = (state, newData) => {
    return Object.assign([], state, newData);
}

My newState was converting my array to an object because I was using the wrong brackets - the Wrong Way is below.

const newState = (state, newData) => {
    return Object.assign({}, state, newData);
}

Good luck, I hope that helps, Rob

Misjudge

Agreed, just different ways of saying the same thing. The upvoted answer describes the state transformation function. This answer shows the code from the ngrx store tutorial. Apologies if it is redundent - I thought this was like the spelling of behavior and behaviour, just whichever makes the most sense to the person seeking information. – Misjudge

Answer 3

I ran into this issue when I changed the WebApi I was calling to return a Task<IActionResult> instead of the previous IEnumerable<object>. Check the response isn't wrapped in an object. I had to change my extractData method to:

private extractData(res: Response) {
   let body = res.json();
   return body.result || body || { };
}

Bernadinebernadotte

Thanks, I was using "data as Node[]", and kind of expected it to throw an exception if that didn't pass. – Simonne

Answer 4

The best way is to take the NgForm object and call its reset() function.

Example:

Html file

<form #exampleform='ngForm'>

</form>

ts file

@ViewChild('exampleform') exampleform :NgForm;

this.exampleform.reset(); // resets the form

Trilateral