Angular2 Error trying to diff '[object Object]'

I wanted to update my application so the data displayed in css / bootstrap will 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 worked fine. But when I tried to integrate this with my application that takes data from JSON it crashes with Error trying to diff '[object Object]'

.

Checking this problem here and on the internet didn't help because it only made some assumptions like Angular, didn't check if the data inside was changed DataTable

(I'm not even sure if that's true).

Before making changes to my application, you needed to log in with the correct username and password in order to display the details for the registered 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>

      

Example of JSON from url (the status happens once, all "interesting" data is inside the array dallases

).

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

      

+3


source to share


1 answer


You need to pass 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>

      

+3


source







All Articles