Ionic 4 & ngx-datatable

[blondie63]

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:
COMPANY TIME
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 => {
      this.data = json;
    });

I need help to create code for columns headers…

Thanks for help

[crmontiel]

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.

[blondie63]

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

[crmontiel]

@blondie63

ngx-datatable

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

[crmontiel]

blondie63

What is promised is debt.
HTML

TS

Result

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.

[blondie63]

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 tab5.page.ts:129
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;
  }

[crmontiel]

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 https://stackblitz.com/edit/ionic-ngx-datatable

[blondie63]

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:

   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:

   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)

Utility:

   cordova-res : 0.6.0 
   native-run  : 0.2.8 

System:

   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

[crmontiel]

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
  }

[blondie63]

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
}