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

Answer 1

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>