Using data from array in Javascript

utboi

So I'm working in angular with Angular Datatables library to display tables. I've got GeoJSON data which I'm fetching from different URLs and pushing them in different arrays.

This is how the array of all the column heading looks like.

This is how the array of all the column data looks like.

Now I have 30+ columns and 100+ rows of data that I am putting in my arrays. I have to display all this data in a table, but I want to use those arrays for the same. How do I proceed with the same? I have three different URLs to fetch data from and display it and all of them have different column names and number of rows.

It's a really big project so I can't show you all of the code, but I can try showing you how I have tried creating tables and dtOptions in my .ts file.

//Declaring dtOptions as any
dtOptions1:any = {};

//Setting options for the datatable
this.dtOptions1 = {
      data: item1,
      paging: false,
      scrollY: 150,
      // scrollX: true,
      processing: true,
      dom: 'Bfrtip',
      buttons: [
            'copy', 'csv', 'excel', 'print'
        ]
    };


<!--this is one of the methods I tried, even tried *ngFor, it works but then I can't use the options like search, sort, buttons, etc. Even tried all the thead and tbody tags-->
<table datatable [dtOptions]="dtOptions1" *ngSwitchCase="1">
</table>

If you need more info please do ask me. I would be happy to provide that if I can. Just need a way to solve this. Thanks

allan

Sounds like you just need to define the columns array in this case. e.g.:

columns: [
  { title: 'A' },
  { title: 'B' },
]

You could if you wanted set the columns.data option, but since you are using arrays, DataTables will automatically set the data property to the column index. i.e. the above is the same as if you were to use:

columns: [
  { data: 0, title: 'A' },
  { data: 1, title: 'B' },
]

Allan

kthorngren

Datatables 101: Datatables requires all rows to have the same number of cells without using colspan and rowspan. See the HTML requirements. If the three datasets have the same number of columns then populating a single Datatable with the three datasets shouldn't be a problem.

all of them have different column names

Are the column names listed in one of the array elements? You may need to remove this element.

Does this mean that the data in the three datasets have different meanings. In other words does column 0 and dataset 1 have the same data as dataset 2, etc. Meaning if you were to combine all three in a spreadsheet the column data is correct?

You might need to provide more details of how you expect the data to be combined. Maybe you need to display the data in three different Datatables.

I'm not familiar with Angular but not how this works:

<table datatable [dtOptions]="dtOptions1" *ngSwitchCase="1">

But I would remove data: item1, to initialize an empty table. After fetching the data use rows.add() to add to the Datatable. This assumes the data in the three datasets line up.

even tried *ngFor, it works but then I can't use the options like search, sort, buttons, etc.

Sounds like this happens after initializing Datatables. Datatables doesn't know about changes made directly to the DOM. For this to work you need to build the HTML table, with the three datasets, then initialize Datatables.

Kevin