Ionic 4 & ngx-datatable

I need to render on page some json files like this:

		"Company": "Lavasoft",
		"Time": 79
		"Company": "Macromedia",
		"Time": 114
		"Company": "Apple Systems",
		"Time": 120

and i need to create columns header dynamically, for example this render will be:
Macromedia 114
Apple Systems 120

I’m using this code to get data from file:

    fetch('../../assets/sample-data/mc.json').then(res => res.json())
    .then(json => { = json;

I need help to create code for columns headers…

Thanks for help

Hello, I hope it serves you and is what you are looking for

Ts. – You have to create a function that will return the json key
Make sure the first object contains all the headers you require so that you avoid problems.

You can use it as follows

If this is what you needed, don’t forget to mark it as solved in case someone else gets to forget it, we can easily find it.

1 Like

This can be an alternative solution but not using ngx-datatable :frowning:

Ok wait for me, and I send you the example with ngx-datatable.

If you have a little knowledge you can adapt this that I put up to what you want. but let me help you adapting it to ngx

1 Like


What is promised is debt.



There is what you need with the ngx-datatable.

For the next try to adapt the code that is given to what you need, do not expect someone to solve it completely.
if you can see it is the same code literally just add a path of object.keys to be able to send the fix that requires the ngx-datatable for the headers

Good luck and don’t forget to mark as resolved.

Are you using Ionic 4 and Typescript ?
On my side i’ve this error:
ERROR Error: Uncaught (in promise): TypeError: Cannot read property ‘push’ of undefined
TypeError: Cannot read property ‘push’ of undefined
at Array.forEach ()

  header(dat) {
    let h: any [];
    const listHeader: any = Object.keys(dat);
    listHeader.forEach(item => {
      h.push({ name: item }); // line 129
    return h;

i’m using Ionic 5.2.5 and typescript
But that shouldn’t be a problem for you, because it’s really universal code

I transcribed the example in StackBlitz

Many thanks for the time you are dedicating to me but not able to understand why the h.push is always go in error… this my ionic info:


   Ionic CLI                     : 5.2.6 (/Users/mauro/.nvm/versions/node/v12.6.0/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.8.1
   @angular-devkit/build-angular : 0.803.1
   @angular-devkit/schematics    : 8.3.1
   @angular/cli                  : 8.3.1
   @ionic/angular-toolkit        : 2.0.0


   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.0.0, browser 6.0.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.1, (and 9 other plugins)


   cordova-res : 0.6.0 
   native-run  : 0.2.8 


   Android SDK Tools : 26.1.1 (/Users/mauro/Library/Android/sdk)
   ios-deploy        : 1.9.4
   ios-sim           : 7.0.0
   NodeJS            : v12.6.0 (/Users/mauro/.nvm/versions/node/v12.6.0/bin/node)
   npm               : 6.11.1
   OS                : macOS Mojave
   Xcode             : Xcode 10.3 Build version 10G8

Don’t worry I like to help.
I see you have a error…
So you can push the variable you need to initialize the variable in an empty array.
look what if you don’t start the variable in an empty array

Use this with =

 header(dat) {
    let h:any =[] //array to title columns
    let listHeader: any = Object.keys(dat) //getting the headings and adding
    listHeader.forEach(item => { //scanning the array of titles
      h.push({ name: item }) //adding the titles to the list
    return h //retuning list

ok this works fine ! Thanks !
There’s only a limitation about key names that must be lowercase !
this is not valid:
“Mese”: “Febbraio”,
“Ore”: 189