Muhammad Arslan Muhammad Arslan -4 years ago 230
JSON Question

How to display data in Primeng Datatable from Json file

I have Data in Object form and I want to display it in Primeng Datatable but it display No record found.

data in json file

{
"value1": "Value1",
"value2": "value2",
"value": "Value3"
}


this is how i get it in component file

this.http.get("app/components/my.json").subscribe((data) => {
this.value = data.json();
});


and here is how i am trying to display it

<p-dataTable [value]="values">
<p-column field="value1" header="Value1"></p-column>
</p-dataTable>

Answer Source

The gridMenuOptions object needs to be an array type to bind to the value input property on the PrimeNG datagrid component.

It's not quite clear from the question but it doesn't look like your data is in that format? It would need to in this shape:

gridMenuOptions = [
  {quantity: 1, section: 'A', row: 1}, 
  {quantity: 2, section: 'B', row: 3}
];

Then you can bind it to a datatable definition e.g.

<p-dataTable [value]="gridMenuOptions">
    <p-column field="quantity" header="Quantity"></p-column>
    <p-column field="row" header="Row"></p-column>
    <p-column field="section" header="Section"></p-column>
</p-dataTable>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download