So, the idea is to convert each of the CSV rows into a table row. With that in mind, let’s briefly explain how the code above works:

First, we use a regex to split the AJAX response, and thus separate the CSV rows.

Then, we iterate through the CSV rows and split their data fields.

Finally, we loop through the data fields and create the corresponding table cells.

Furthermore, to get a better understanding of this code, consider the following visualization:

At this point, it’s important to clarify why we used the /\r?\n|\r/ regex to split the CSV rows.

As you probably already know, there are different representations of a newline across operating systems. For example, on Windows platforms the characters representing a newline are \r\n. That said, by using the regex above, we’re able to match all those possible representations.

In addition, most text editors allow us to choose the format for a newline. Take, for instance, Notepad++. In this editor, we can specify the desired format for a document by navigating to this path:

To illustrate it, consider our file. Depending on the format we choose, it would look like this:

Adding Styles to the HTML Table

Before we look at the resulting table, let’s add a few basic styles to it:

Conclusion

In this short article, we went through the process of converting a CSV file into an HTML table. Of course, we could have used a web-based tool for this conversion, yet I think that it’s always more challenging to achieve this by writing your own code.