CODEWITHSUNDEEP
jsonangularprimeng
Haseoh
Haseoh

Reputation: 930

PrimeNG DataTable filling out the data issue

I have an issue with filling the DataTable with data from JSON. I cannot access the one of the JSON's field which is an array. Currently, it returns [object Object] instead of proper data. I create the cols dynamically in component with ngOnInit.

Simplified code:

Vehicle.component.ts

export class VehicleComponent implements OnInit {

  cols: any[];
  cols2: any[];

  ngOnInit() {
    this.cols = [
      { field: 'vehicle_id', header: "Vehicle ID" },
      { field: 'dallassettings', header: 'Dallas settings' },
      { field: 'dallasupdated', header: 'Dallas updated' },
      { field: 'dallas_list', header: 'Dallas list' }
    ];
    this.cols2 = [
      { field: 'number', header: 'Number' },
      { field: 'auth', header: 'Auth' },
      { field: 'dallas_list', header: 'Dallas list' }
    ]; //testing out other possibilities
  }

  public vehicles: GeneralVehicle[];

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

interface GeneralVehicle {
  status: number;
  dallases: Vehicle[];
}

interface Vehicle {
  vehicle_id: number;
  dallassettings: string;
  dallasupdated: string;
  dallas_list: DallasList[];
}

interface DallasList {
  number: number;
  auth: number;
}

Vehicle.service.ts

export class VehicleService {
    private defUrl = 'dummy.url';

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

vehicle.html

    <div *ngIf="vehicles">
        <p-dataTable [value]="vehicles.dallases">
            <p-column *ngFor="let col of cols" [field]="col.field" [header]="col.header"></p-column>
        </p-dataTable>
    </div>

<!--Testig out other possibilities-->
    <div *ngIf="vehicles">
        <p-dataTable [value]="vehicles.dallas_list">
            <p-column *ngFor="let col2 of cols2" [field]="col2.field" [header]="col2.header"></p-column>
        </p-dataTable>
    </div>

Current output: enter image description here

When I try to get the number and auth from dallas_list array:

enter image description here

This is how the JSON looks like:

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

As you can see, I'm interested only in data inside the dallases field.

Expected cols output: vehicle_id, dallassettings, dallasupdated, number, auth.

Upvotes: 0

Views: 1518

Answers (2)

Garth Mason
Garth Mason

Reputation: 8011

It seems you've got a nested array there so how do you want to display that information in the datatable?

Each vehicle in the 'dallases' array then has a child list (dallas_list) containing multiple entries of 'number/auth'.

You could transform your list to flatten that out so you have 1 row for each entry in 'dallas_list'.

Alternatively, the PrimeNG datatable supports row expansions - so you could keep the data in the current form and have the expansion template display the number/auth details.

Upvotes: 1

Vignesh
Vignesh

Reputation: 2384

In the json object the dallases_list is under dallases. so after accessing dallases from that index you need to access the dallases_list 

<div *ngIf="vehicles">
        <p-dataTable [value]="vehicles.dallases">
            <p-column *ngFor="let col of cols" [field]="col.field" [header]="col.header"></p-column>
        </p-dataTable>
    </div>

<!--Testig out other possibilities-->
    <div *ngIf="vehicles">
        <p-dataTable [value]="vehicles.dallases[0].dallas_list">
            <p-column *ngFor="let col2 of cols2" [field]="col2.field" [header]="col2.header"></p-column>
        </p-dataTable>
    </div>

Upvotes: 1

Related Questions