How to populate JSON data using ngx-datatable in angular 4

Question

I am new to Angular 4 and i am trying to implement the ngx-datatble by following the approach defined in ngx-datatable github and i am able to populate the table, however my confusion starts when i am trying to populate the data from a JSON object. The row and column array are bonded with the "name" property and same is being shown as header. But in actual JSON we will have camel-case naming convention.How to populate that data with proper header.

Please advice, any help would be appreciated..!!!

Thanks in Advance

Please find my code below:

HTML

<div>
  <ngx-datatable
    [rows]="rows"
    [columns]="columns">
  </ngx-datatable>
</div>

TS File

rows = [
    { Firstname: 'Austin', gender: 'Male', company: 'Swimlane' },
    { name: 'Dany', gender: 'Male', company: 'KFC' },
    { name: 'Molly', gender: 'Female', company: 'Burger King' },
];
columns = [
    { prop: 'Firstname' },
    { name: 'Gender' },
    { name: 'Company' }

];

Target JSON

[{
  "firstName":"abc",
  "lastName":"xyz",
  "address_1":"lorem ipsum",
  "address_2":"and so on"
},{
  "firstName":"abc",
  "lastName":"xyz",
  "address_1":"lorem ipsum",
  "address_2":"and so on"
},{
  "firstName":"abc",
  "lastName":"xyz",
  "address_1":"lorem ipsum",
  "address_2":"and so on"
}]

Check ngx-datatable in Angular 4 to 7 here stackoverflow.com/questions/48860675/… — Code Spy

Vivek Doshi Vivek Doshi · Accepted Answer · 2018-02-19T07:26:33

columns = [
    { 
       prop: 'Firstname', // prop will bind to the json property
       name : 'First Name' // You can define the name here 
                          // ( Column label. If none specified, it will use the prop value and decamelize it. )
    },
    { name: 'Gender' },
    { name: 'Company' }

];

For More Detail : Read

How to populate JSON data using ngx-datatable in angular 4

1 Answers