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

score 111 · Answer 1 · answered Aug 24 '16 at 23:25

111

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.

answered Aug 24 '16 at 23:25

retrospectacus

2,518
1
11
18

1

how do you do that in the service? – Alejandro Maliachi Quintana May 18 '18 at 18:20
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. – retrospectacus May 29 '18 at 19:53

score 3 · Answer 2 · answered Jan 28 '20 at 03:24

3

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

answered Jan 28 '20 at 03:24

LiveOrDevTrying

31
3

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. – LiveOrDevTrying Jan 28 '20 at 21:26

score 1 · Answer 3 · answered Feb 02 '18 at 11:33

1

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

answered Feb 02 '18 at 11:33

Neil Pimley

11
1

Thanks, I was using "data as Node[]", and kind of expected it to throw an exception if that didn't pass. – Jeppe Nov 05 '18 at 05:48

score -3 · Answer 4 · answered Mar 04 '18 at 01:43

-3

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

answered Mar 04 '18 at 01:43

amazing carrot soup

265
5
14

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

4 Answers4

Linked

Related