"use strict";

                            // basic read csv data
                            document.querySelector("#parse-button").addEventListener('click', function () {
                                // user selected file
                                let file = document.querySelector("#file-input").files[0];

                                // create a new FileReader Object
                                let reader = new FileReader();

                                // once the file is read trigger event
                                reader.addEventListener('load', function (e) {
                                    // file content
                                    let text = e.target.result;

                                    // var to hold the content after spliting on each new line
                                    let newTextLines = "";

                                    if (text !== "") {
                                        newTextLines = text.split("\n"); // split into an string array for each line

                                    }

                                    // slice of the header titles from the string array
                                    let headerTitleList = newTextLines[0].split(",");

                                    // create a formated/markup template literal of the header titles - 
                                    let titles = "";
                                    for (let i = 0; i < headerTitleList.length; i++) {
                                        titles += `${headerTitleList[i]}`;

                                    }
                                    document.getElementById('file-fieldHeaders').innerHTML = titles;

                                    // slice off the rest of the content from the string array
                                    let contentItemsList = newTextLines.slice(1, newTextLines.length);

                                    // 
                                    let itemsList = "";
                                    for (let i = 0; i < contentItemsList.length; i++) {
                                        itemsList += contentItemsList[i];

                                    }

                                    // split into rows
                                    let rows = "";
                                    if (itemsList !== "") {
                                        rows = itemsList.split("\r"); // split on each row

                                    }

                                    // create a formated/markup template literal of the row items
                                    let templateFields = "<tr>";
                                    for (let i = 0; i < rows.length; i++) {
                                        let rowItems = rows[i].split(",");
                                        for (let index = 0; index <= rowItems.length; index++) {
                                            if(index < rowItems.length) {
                                                templateFields += `<td>${rowItems[index]}</td>`;
                                            } else if(index >= rowItems.length) {
                                                templateFields += `</tr>`;
                                            }
                                            
                                        }

                                    }

                                    document.getElementById('file-contents').innerHTML = templateFields;

                                });

                                reader.readAsText(file);
                            });
                        
                    

JS CSV Reader

Using HTML, JavaScript, custom CSS & Bootstrap to design an application that takes a user selected CSV file, reads the data and displays it back to the page formated.

The code is structure as a single function.

Using the DOM we locate several html tags by their id using document.querySelector(). The user can browse to a local CSV file and is access by JavaScript as a 'file object' which can provide metadata like the file's name, type and size (not used in this example).

The contents of the file object is read by the new FileReader() object, is preformed asynchronously and stored in the 'text' variable when reader.addEventListener() is triggered. That content is then split on each new line and store in the 'newTextLines' string array.

Next we slice off the first line of the CSV file as header information and use a for loop to populate a template literal as header titles ('titles') for our table to displayed back to the page by using the document.getElementById() its .innerHTML property.

Then we slice the remaing content from the header content in the string array, looping through it to create clean rows, then spliting those rows.

Finally, we we use nested 'for loops' to get each field value per row and populate a template literal to display the table row and table data for each value by using the document.getElementById() its .innerHTML property.