Angular2 Error trying to diff '[object Object]'

Question

I wanted to upgrade my app, so the data displayed in css/bootstrap would be changed to Prime NG DataTable where I can filter and sort the data. First of all I tried DataTable with dummy class + dummy data. It was working fine. But when I tried to integrate this with my app which takes the data from JSON, it crashes with Error trying to diff '[object Object]'.

Checking this problem here and on the internet didn't helped, because it only made some speculations like Angular does not check if data inside DataTable was changed (I'm not even sure if it's true).

Before the changes in my app, you had to login with correct username and password to display the data behind the logged account. Now when I login, it doesn't work with Prime NG DataDatble.

Simplified code:

Vehicle.Service.ts

@Injectable()
export class VehicleService {
    private defUrl = 'someURL';

    constructor(private http: Http) { }
    getVehicle(username?: string, password?: string) {
        const url = (!username || !password) ? this.defUrl : 'someURL' + username + '/' + Md5.hashStr(password);
        return this.http.get(url)
            .map(res => res.json());

    }

Vehicle.component.ts

  public vehicles: GeneralVehicle[];

  constructor(private vehicleService: VehicleService, private router: Router) {
    this.vehicleService.getVehicle().subscribe(vehicle => {
      this.vehicles = vehicle;
      this.vehicles = this.vehicleService.parseUser();
    });
  }

Template: vehicle.html

<div *ngIf="vehicles">
    <p-dataTable [value]="vehicles">
        <p-column field="vehicles.vehicle_id" header="ID"></p-column>
        <p-column field="vehicles.dallassettings" header="Name"></p-column>
    </p-dataTable>
</div>

Exemplary JSON from url (status occures once, all the "interesting" data is inside the dallases array).

{
    "status": 0,
    "dallases": [{
        "vehicle_id": 17954,
        "dallassettings": "3",
        "dallasupdated": "False",
        "dallas_list": [{
            "number": 666111222,
            "auth": 3
        }, {
            "number": 666777888,
            "auth": 4
        }, {
            "number": 123454321,
            "auth": 4
        }]
    }
}

Vignesh · Accepted Answer · 2017-03-23 08:04:35Z

3

You need to pass in html as

<div *ngIf="vehicles.dallases">
    <p-dataTable [value]="vehicles.dallases">
        <p-column field="vehicles.dallases.vehicle_id" header="ID"></p-column>
        <p-column field="vehicles.dallases.dallassettings" header="Name"></p-column>
    </p-dataTable>
</div>

answered Mar 23, 2017 at 8:04

Vignesh

2,3844 gold badges28 silver badges48 bronze badges

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

2 Comments

Haseoh Over a year ago

Your solutions works if I use *ngfF="vehicles" (if I use vehicles.dallases it points out a error with undefinfed dallases), but the DataTable is empty. However, if I intentionally input wrong username and password there is one row with: No records found. Is something not right with the service or constructor?

Haseoh Over a year ago

I found the issue, something's up with saving the username and password. It's not related to this question. Thanks for help!

Collectives™ on Stack Overflow

Angular2 Error trying to diff '[object Object]'

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related