Dynamic HTML table from CSV file

Question

I have a simple csv file. Sample data is given below (sample.csv).

date,team_1,team_2
2019-06-12,AUS,PAK
2019-06-13,IND,NZ

I want the above to be displayed as a table in a HTML page, such that new rows will automatically add to the table as and when a new record is added to the csv file.

Can someone please help me with a very simple solution?

EDIT: Based on answer to this question, I have written (copied) the following piece of code, but other than the first line, it does not show anything.

function createTable() {
  var array = [
    ["date","team_1","team_2"],
    ["2019-06-12","AUS","PAK"],
    ["2019-06-13","IND","NZ"]
  ];
  var content = "";
  array.forEach(function(row) {
    content += "<tr>";
    row.forEach(function(cell) {
      content += "<td>" + cell + "</td>";
    });
    content += "</tr>";
  });
  document.getElementById("t1").innerHTML = content;
}
createTable()

<table id="t1"> </table>

Thanks @mplungjan! I have very limited knowledge of HTML and JS, and I have looked at more or less all the questions and top answers retrieved from Google search on this topic. However, I was not able to use any of those "effectively" to solve my problem, probably due to my lack of knowledge of this technology. Hence, I would really appreciate some "concrete" help, if possible. — Supratim Haldar
– Supratim Haldar, Commented Jun 13, 2019 at 15:06
With regards to the SO question marked as duplicate, I had seen that. I have 2 questions - (1) How do I make createTable() function read a CSV file instead of a hardcoded array, and (2) How do I invoke that function from <table> so that the rows and cells are populated based on the content. — Supratim Haldar
– Supratim Haldar, Commented Jun 13, 2019 at 15:13
See my update - I made you a snippet. and reopened the question — mplungjan
– mplungjan, Commented Jun 13, 2019 at 15:19
So to get the data, you would need to split on \n and then split on comma — mplungjan
– mplungjan, Commented Jun 13, 2019 at 15:21

tuhin47 · Accepted Answer · 2019-07-28 17:14:56Z

1

Here this code works correctly. Open a file.csv as you described. When you add or delete line in the CSV it works accordingly in the HTML page.

var init;
    const logFileText = async file => {
        const response = await fetch(file);
        const text = await response.text();
        all = text.split('\n');
        if (init !== all.length) {
            //console.log(all.length, init);
            init = all.length;
            //console.log('changed');
            var arr=[];
            all.forEach(el => {
                el=el.split(',');
                arr.push(el);
            });
            // console.log(arr);

            createTable(arr);

        }

    }

    function createTable(array) {
        var content = "";
        array.forEach(function (row) {
            content += "<tr>";
            row.forEach(function (cell) {
                content += "<td>" + cell + "</td>";
            });
            content += "</tr>";
        });
        document.getElementById("t1").innerHTML = content;
    }

    var file = 'file.csv';
    logFileText(file);
    setInterval(async () => {
        await logFileText(file);
    }, 2000);

<table id="t1"> </table>

answered Jul 28, 2019 at 17:14

tuhin47

6,2735 gold badges22 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tuhin47 Over a year ago

It is an interesting problem I have solved. I feel pleasure.

Collectives™ on Stack Overflow

Dynamic HTML table from CSV file

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related