How to create HTML data tables from dynamic csv files of a folder

Question

I was wondering how to create HTML data tables from multiple CSV file.

For example, I have a folder containing CSV files named "Data_Source1-Memory.csv", "Data_Source1-CPU.csv", Data_Source1-Disk.csv", Data_Source2-Memory.csv" and "Data_Source2-CPU.csv".

These files are created dynamically depending on the "Data_Source1" or "Data_Source2". So, every time it will not necessarily have Memory or CPU or Disk CSV files.

Is there a way I can cycle through these csv files for "Data_Source1" and present these in a HTML table (one table for Memory, one table for Disk and one table for CPU). Then cycle through the folder for "Data_Source2" and present these csv as HTML tables.

So far all I can find is jQuery plugins, that as far as I can test will only work for static csv files or data (e.g. DataTables).

I also know what files exist so I don't have to search to see if there is a file, I know which files I need. I just don't know how to loop through different csv files to produce a table per csv file.

Any help or advice would be much appreciated.

you cannot do that because JavaScript cannot get a list of the files in the folder by itself. You would need to run some server which either constructs this HTML page on request or at least gives the folder contents — smnbbrv, Feb 11 '16 at 09:54
Possible duplicate of [get a list of all folders in directory](http://stackoverflow.com/questions/15537424/get-a-list-of-all-folders-in-directory) — smnbbrv, Feb 11 '16 at 09:54
@smnbbrv I can access a list of the related titles (i.e. Memory, CPU, Disk) for each for the Data_Sources. So I know which files exist or not if that helps — Catherine, Feb 11 '16 at 10:36
@markpsmith yes I would like it all working locally on my machine — Catherine, Feb 11 '16 at 10:54
by client-side i mean using javascript only, ie no 'back-end' code like C# or PHP — markpsmith, Feb 11 '16 at 11:35
@markpsmith Apologies, if possible I would like to use Javascript or Python only — Catherine, Feb 11 '16 at 11:40

score 0 · Answer 1 · edited May 23 '17 at 10:28

As long as the server directory has directory listings enabled, and you run your script from within the domain, then there should be no problems by collecting a list of certain files from a certain directory. Simply use $.ajax and parse filenames out of the retrieved directory listing HTML page. The below works on a standard apache :

var fileMask = '-CPU', //signature of the files
    fileExt = 'csv'; //file extension
$.ajax({
    url: 'path/to/directory/',
    success: function (data) {
        var file, files = [];
        $('a[href]', data).each(function(i, a) {
            file = $(a).attr('href');
            if (~file.indexOf(fileMask) && file.match(/[^.]+$/) == fileExt) {
                files.push(file);
            }
        })
    }
})

The result is a files array containing

['Data_Source1-CPU.csv', 'Data_Source2-CPU.csv', 'Data_Source3-CPU.csv']

You can use files.sort() if you want the list of files to be in numeric order. Now it should be a nobrainer to use files as base for an automatically created dataTable - see Create dataTable column definition from uploaded csv data - cycle through files and insert the data from each CSV instead of a single file as in the answer.

How to create HTML data tables from dynamic csv files of a folder

1 Answers1