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

retrospectacus · Accepted Answer · 2016-08-24 23:25:09Z

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, 2016 at 23:25

retrospectacus

2,5961 gold badge13 silver badges18 bronze badges

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

2 Comments

Alejandro Maliachi Quintana Over a year ago

how do you do that in the service?

retrospectacus Over a year ago

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.

LiveOrDevTrying · Accepted Answer · 2020-01-28 03:24:00Z

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, 2020 at 3:24

LiveOrDevTrying

313 bronze badges

1 Comment

LiveOrDevTrying Over a year ago

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.

Neil Pimley · Accepted Answer · 2018-02-02 11:33:36Z

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 2, 2018 at 11:33

Neil Pimley

111 bronze badge

1 Comment

Jeppe Over a year ago

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

amazing carrot soup · Accepted Answer · 2018-03-04 01:43:43Z

-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 4, 2018 at 1:43

amazing carrot soup

2656 silver badges15 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

2 Comments

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related