Create structured JSON object from CSV file in JavaScript?

Question

I want to create a JSON object from the contents of a CSV file. The CSV file is loaded locally via the FileReader API and that seems to work, however I am having trouble structuring the JSON in the desired way.

My code for loading the CSV file looks like this:

<!DOCTYPE html>
<html>
    <body>
        <p>Select local CSV File:</p>
        <input id="csv" type="file">
        <output id="out"> input file content</output>
        <script>
            var fileInput = document.getElementById("csv"),
            readFile = function () {
                var reader = new FileReader();
                reader.onload = function () {

                    // Display CSV file contents
                    document.getElementById('out').innerHTML = reader.result;
                };

                reader.readAsBinaryString(fileInput.files[0]);
            };
            fileInput.addEventListener('change', readFile);
        </script>
    </body>>
</html>

The code above allows me to load the contents of the CSV file and display them on the current page. To structure the CSV data into the desired format above I tried the following, however it didn't work to me:

<!DOCTYPE html>
<html>
    <body>
        <script>
            var fileReader = new FileReader();
            function getFile(inputFile) {
            let file = inputFile.files[0];
            fileReader.readAsText(file);
            }
            function csvJSON(csv){
            var lines=csv.split("\n");
            var result = [];
            var headers=lines[0].split(",");
            for(var i=1;i<lines.length;i++){
                var obj = {};
                var currentline=lines[i].split(",");
                for(var j=0;j<headers.length;j++){
                    obj[headers[j]] = currentline[j];
                }
                result.push(obj);
            }
            return JSON.stringify(result); //JSON
            }
            function readFile(evt) {
            let parsed = csvJSON(evt.target.result);
            return parsed;
            }
        </script>
    </body>
</html>

How can I acquire my expected JSON object(s)? Any suggestions would be appreciated

Just curious but is this your actual CSV structure? It seems like there should be a newline \n character after every 6 entries... — War10ck
– War10ck, Commented Feb 25, 2019 at 19:14

Dacre Denny · Accepted Answer · 2019-02-25 19:23:45Z

2

One approach to this would be to iterate through your input CSV data on increments of "6" (where 6 represents the number of different bits of data for each student) to capture all student data per CSV row, and then populate an array of structured JSON objects in the desired format like so:

/* Helper function to perform the CSV to JSON transform */
function convertToJson(inputCsv) {

  /* Split input string by `,` and clean up each item */
  const arrayCsv = inputCsv.split(',').map(s => s.replace(/"/gi, '').trim())

  const outputJson = [];

  /* Iterate through input csv at increments of 6, to capture entire CSV row 
     per iteration */
  for (let i = 6; i < arrayCsv.length; i += 6) {

    /* Extract CSV data for current row, and assign to named variables */
    const [date, firstName, middleName, lastName, uin, rsvpStatus] = 
    arrayCsv.slice(i, i + 6)
    
    /* Populate structured JSON entry for this CSV row */
    outputJson.push({
      uin,
      studentInfo: {
        firstName,
        middleName,
        lastName,
        rsvpStatus
      }
    });
  }

  return outputJson;
}

/* Input CSV data from your exsiting code */
const csv = `"Timestamp", "Enter First Name:", "Enter Middle Initial", 
"Enter Last Name:", "Enter UIN:", "Are you attending the event?",
  "2019/02/22 12:41:56 PM CST", "Jonathan", "Samson", "Rowe", "123456789", 
"No", "2019/02/22 12:44:56 PM CST", "phil", "Aspilla", "beltran", "123456788", 
"Yes"`

const json = convertToJson(csv);

console.log(json);

edited Feb 25, 2019 at 19:23

answered Feb 25, 2019 at 19:13

Dacre Denny

30.4k5 gold badges53 silver badges66 bronze badges

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

7 Comments

beyond_inifinity Over a year ago

thanks for your help, it is good work. BTW, whenever local csv file uploaded just like my first part of code then running your function in the same snippet? what is fully working example which allows me to upload local csv file then run your code? sorry for my naive question. Thanks a lot

Dacre Denny Over a year ago

@beyond_inifinity glad I could help! sorry not sure I understand - are you wanting me to show you how to integrated the convertToJson() function in my answer, with the code in your question?

beyond_inifinity Over a year ago

yeah, like how can I make the first part of my code and your contributed code together in fully parsing working example? or I don't need my first part of the code? I am sorry for this question. I am going to accept your solution, it is big plus

Dacre Denny Over a year ago

Hi there, one method would be to create a temporary download link to the data via a data url , I'll post a link here shortly

Dacre Denny Over a year ago

@beyond_inifinity have a look at this codepen.io/vidhill/pen/bNPEmX . This lets you download data from your app, to a file on your local machine (ie harddrive). Hope that helps

|

David Castro · Accepted Answer · 2019-02-26 15:30:18Z

2

If you are struggling to parse data, you can also use PapaParse, it has a lot of configurations and it's pretty easy to use:

// Parse CSV string
var data = Papa.parse(csv);

See more information at https://www.papaparse.com/demo

edited Feb 26, 2019 at 15:30

answered Feb 25, 2019 at 19:12

David Castro

2,05523 silver badges25 bronze badges

Comments

Jason Pelletier · Accepted Answer · 2019-02-25 19:07:25Z

var csv = '"Timestamp","Enter First Name:","Enter Middle Initial","Enter Last Name:","Enter UIN:","Are you attending the event?"\n"2019/02/22 12:41:56 PM CST","Jonathan","Samson","Rowe","123456789","No"\n"2019/02/22 12:44:56 PM CST","phil","Aspilla","beltran","123456788","Yes"';

var csvJSON = function(csv) {
  let vals = csv.split('\n'), ret = [];
  for( let i = 1, len = vals.length; i < len; i++ ){
    let person = vals[i].split(',');
    ret.push({
      uin : person[4],
      studentInfo : {
        firstName : person[1],
        middleName : person[2],
        lastName : person[3],
        rsvpStatus : person[5]
      }
    });
  }
  return JSON.stringify(ret);
}

console.log(csvJSON(csv));

This is assuming the structure of the CSV is always the same.

Collectives™ on Stack Overflow

Create structured JSON object from CSV file in JavaScript?

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related