Parse CSV records in to an array of objects in JavaScript

Question

I'm new to JS and not much exp in Regex to play with string manipulation.

Here is my CSV file with records in tabular form with the first line as headers and from on next line the values will be present:

Name  City   Country
John  Chennai IN
Ken   Brisban AUS
Ben   NY      US

I need the output in a array of objects like this:

[
{Name: 'John',City: "Chennai",Country:"IN"}
{Name: 'Ken',City: "Brisbane",Country:"AUS"}
{Name: 'Ben',City: "NY",Country:"US"}
]

I'm uploading a CSV file and need to save those records in to DB and below is the code block which will be triggered after I upload the CSV and I tried to parse the CSV records with below:

        $scope.processFiles = function() {
            //var input = document.getElementById("fileOutput");
            var input = document.querySelector('input[type = "file"]')
            var file = input.files[0];
            var reader = new FileReader();
            var output;
            reader.onload = function (e) {
                var csvToText = e.target.result;
                output = csvToJSON(csvToText);
                console.log(output);
            };
            reader.readAsText(file);
            event.preventDefault();
        }

        function csvToJSON(csv) {
            var lines = csv.split("\n");
            var result = [];
            var headers;
            for (var i = 0; i < lines.length; i++) {
                headers = lines[i].split("\n");
            }
            var cont = 0;
            for (var i = 0; i < lines.length; i++) {

                var obj = {};
                var currentline = lines[i].split("\n");
                for (var j = 0; j < headers.length; j++) {
                    obj[cont] = currentline[j];
                }
                cont++;
                result.push(obj);
            }
            console.log(result);
            //console.log(JSON.stringify(result));

            //return result;
        }

The output I'm getting is below i.e. the values are shown in one line with comma separators and the fourth array element is not supposed to display.

0: {0: "Name,City,Country"}
1: {1: "John,Chennai,IN"}
2: {2: "Ken,Brisbane,AUS"}
3: {3: "Ben,NY,USA"}
4: {4: ""}

Answer 1

I have corrected your function to return the output in the desired format:

function csvToJSON(csv) {
    var lines = csv.split("\n");
    var result = [];
    var headers;
    headers = lines[0].split(",");

    for (var i = 1; i < lines.length; i++) {
        var obj = {};

        if(lines[i] == undefined || lines[i].trim() == "") {
            continue;
        }

        var words = lines[i].split(",");
        for(var j = 0; j < words.length; j++) {
            obj[headers[j].trim()] = words[j];
        }

        result.push(obj);
    }
    console.log(result);
}

Answer 2

Try this.

function csvToJSON(csv) {

    //lop off any trailing or starting whitespace
    csv = csv.trim();

    //prep
    let lines = csv.split('\n'),
        headers,
        output = [];

    //iterate over lines...
    lines.forEach((line, i) => {

        //...break line into tab-separated parts
        let parts = line.split(/\t+/);

        //...if not the headers line, push to output. By this time
       //we have the headers logged, so just match the value to
       //header of the same index
        if (i) {
            let obj = {};
            parts.forEach((part, i) => obj[headers[i]] = part);
            output.push(obj);

        //...else if headers line, log headers
        } else
            headers = parts;
    })

    //done
    console.log(output);
    return output;
}

CodePen. (Note: in the CodePen, I'm reading the CSV from an HTML div, hence the minor difference in the code.)

Answer 3

Something like this should work

function csvToJSON(csv) {
            var lines = csv.split("\n");
            var result = [];
            var headers = lines[0].split(",");

            lines.forEach( (line, index) => {
              if (index === 0) continue // skip the first line (headers)

              let data = {};
              let cells = line.split(",") // separate by commas
              cells.forEach( (cell, index) => {
                let header = headers[index];
                data[header] = cell;
              }
              result.push(data);
            }

            console.log(result);
            //console.log(JSON.stringify(result));

            return result;
        }

Answer 4

This worked like a charm: Upload > Convert > Copy https://csvjson.com/csv2json