CSV to JSON Conversion in JavaScript

csv-to-json.js

//var csv is the CSV file with headers
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 result; //JavaScript object
  return JSON.stringify(result); //JSON
}

how to read file and passing by browse

How to pass csv object to this function

fix the issue with double quoted values https://gist.github.com/jonmaim/7b896cf5c8cfe932a3dd

You can use Node.js to read the file and pass the read in CSV data to the function.

How to read the csv file ?? Please help

how to pass csv file in function in using html

On my fork, csvFileToJSON reads a CSV file and returns the JSON object.
https://gist.github.com/jssuttles/8fb8b16a152558906469dfefbf88f658
To get a file, you need to either have a file dropped or selected using a select dialog.
https://www.nczonline.net/blog/2012/05/08/working-with-files-in-javascript-part-1/

what if the csv file is more than 1 GB

@hafizaarif http://papaparse.com/ try this then

To read a csv file locally through the browser, you can use Javascript's FileReader, and then pass the read file to the conversion function
var fileReader = new FileReader();
function getFile(inputFile) {
let file = inputFile.files[0];
fileReader.readAsText(file);
}
function readFile(evt) {
let parsed = csvJSON(evt.target.result);
return parsed;
}

@jonmaim thx mate

Thanks ! 👍

This doesn't work when a text field in the CSV file contains 1 or more commas - even if that text field is properly wrapped in quotes. There needs to be some additional code to regex through quote pairs and protect properly formatted strings that contain commas.

Add trim to clean whitespaces

`
function csvJSON(csv){

var lines=csv.split("\n");

var result = [];

var headers=lines[0].split(",");

headers = headers.map(function(h) {
return h.trim();
});

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].trim();
  }

  result.push(obj);

}

//return result; //JavaScript object
return JSON.stringify(result); //JSON
}
`

Anyone reading this,
PLEASE DONT USE THIS

If strings in your csv file have a comma then this will not work.

I use $.ajax to read local .csv file.

$.ajax({
type: "GET",
url: "data.csv",
dataType: "text",
success: function(csv) {
//toJSON function here
}

In csv file there a '\r' in each row at the end of last column, and a '\n' in each row at the beginning of the first column except the first row. We need to delete them. Here is the code after I revised.

function csvJSON(csv){

var lines=csv.split('\r');
for(let i = 0; i<lines.length; i++){
lines[i] = lines[i].replace(/\s/,'')//delete all blanks
}

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].toString()] = currentline[j];
  }
  result.push(obj);

}
return result; //JavaScript object
//return JSON.stringify(result); //JSON
}

csvJSON function with functional map

var csvJSON = function(csv){

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

  lines.map(function(line, indexLine){
    if (indexLine < 1) return // Jump header line

    var obj = {}
    var currentline = line.split(",")

    headers.map(function(header, indexHeader){
      obj[header] = currentline[indexHeader]
    })

    result.push(obj)
  })

  result.pop() // remove the last item because undefined values
                  
  return result // JavaScript object
}

With modern JS:

const csvToJson = csv => {
  const [firstLine, ...lines] = csv.split('\n');
  return lines.map(line =>
    firstLine.split(',').reduce(
      (curr, next, index) => ({
        ...curr,
        [next]: line.split(',')[index],
      }),
      {}
    )
  );
};

Try this read and transform CSV to JSON

function csvJSON{
var r = new FileReader();
r.onload = function (e) {
var csv = e.target.result;
console.log(csv);
var lines = csv.split("\r\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);
      }
      var fair = JSON.stringify(result); 
      console.log(fair);
    }
    r.readAsText(f);
  } else {
    alert("Failed to load file");
  }
}

With modern JS:

const csvToJson = csv => {
  const [firstLine, ...lines] = csv.split('\n');
  return lines.map(line =>
    firstLine.split(',').reduce(
      (curr, next, index) => ({
        ...curr,
        [next]: line.split(',')[index],
      }),
      {}
    )
  );
};

I haven't benchmarked it, but this should be faster on wide tables:

const csvToJson = csv => {
  const [firstLine, ...lines] = csv.split('\n');
  const keys = firstLine.split(',');
  return lines.map(line => ((values) =>
    keys.reduce(
      (curr, next, index) => ({
        ...curr,
        [next]: values[index],
      }),
      {}
    )
  )(line.split(',')));
};

//Here is the full phase working CSV to JSON using vanilla JavaScript and HTML 5, Which populates result in Console.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>CSV to JSON</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- <script src="convert.js"></script> -->
</head>
<body style="text-align:center">
    CSV to JSON
    <script type="text/javascript">
        function Upload() {
            var fileUpload = document.getElementById("fileUpload");
            var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.txt)$/;
            if (regex.test(fileUpload.value.toLowerCase())) {
                if (typeof (FileReader) != "undefined") {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        console.log("Raw File");
                        console.log(e.target.result);
                        var lines=e.target.result.split('\r');
                        for(let i = 0; i<lines.length; i++){
                        lines[i] = lines[i].replace(/\s/,'')//delete all blanks
                        }
                        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 result; //JavaScript object
                        console.log("After JSON Conversion");
                        
                        console.log(JSON.stringify(result));

                        return JSON.stringify(result); //JSON
                        
                    }
                    reader.readAsText(fileUpload.files[0]);
                } else {
                    alert("This browser does not support HTML5.");
                }
            } else {
                alert("Please upload a valid CSV file.");
            }
        }
    </script>
    <br>
    <br>
    <input type="file" id="fileUpload" />
    <input type="button" id="upload" value="Upload" onclick="Upload()" />
</body>
</html>

If i dont have header, how would the first line of code would change?

obj[headers[j]] = currentline[j];

For those unsure how to pass a CSV file the easy way would be to copy paste it into the browser.

1. Open developer tools / console
2. Paste the function in
3. Paste the CSV in like so

var csv = `headerone,headertwo,headerthree
valueone,value2,value3,
...
`

4. Run the function

csvJSON(csv)

Add trim to clean whitespaces

`
function csvJSON(csv){

var lines=csv.split("\n");

var result = [];

var headers=lines[0].split(",");

headers = headers.map(function(h) {
return h.trim();
});

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].trim();
  }

  result.push(obj);

}

//return result; //JavaScript object
return JSON.stringify(result); //JSON
}
`

this Method works for me, i have been searching a lot of time, but this partner have a correct answer, thanks.. really

@GillermoBI : plz can uu tell us how can i do to execute the script & run it to see the result , cause i don't see how can i put my file_csv ....?

@GillermoBI : plz can uu tell us how can i do to execute the script & run it to see the result , cause i don't see how can i put my file_csv ....?
@Najwa199756 sure, the script, running in the moment to read a file, from a file input type:

<div class="col-4 col-button">
          <button mat-stroked-button color="primary" (click)="fileInput.click()"> <mat-icon>attachment</mat-icon> Cargar</button>
          <label for="fileInput"></label>
          <input id="fileInput" (change)="onFileSelected($event)" #fileInput type="file" hidden/>
          <button mat-stroked-button color="primary" *ngIf="layout" (click)="viewLayout()" matTooltip="ver Layout">
            <mat-icon>attach_file</mat-icon>
          </button>
        </div>

(i use angular 8 for my app), later, when the event fires, i read the file with FileReader and converts as a text:

• some validations for my app it's included
• tempLayout its the result of the csv converted to json,

onFileSelected(event) {
    let reader = new FileReader();
    if (event.target.files && event.target.files.length > 0) {
      let position = event.target.files[0].name.indexOf('.');
      if(event.target.files[0].name.substring((position+1), event.target.files[0].name.length) === 'csv'){
        reader.readAsText(event.target.files[0]);
        reader.onload = (e) => {
          const csv: string = reader.result as string;
          let tempLayout = this.csvJSON(csv);
          tempLayout = this.checkLayout(tempLayout);
          if(tempLayout){
            if(!this.filterLayout(tempLayout)){
              event.target.value = '';
            }
          } else {
            event.target.value = '';
          }
        }
      } else {
        this.comunesService.showMessage("debe insertar un archivo con terminacion .csv");
        event.target.value = '';
        this.layout = undefined;
        this.layoutChanged = undefined;
        this.openDialog();
      }
    }
  }

later, when some validations it's ok, i use the csv-json converter

csvJSON(csv: string){
    let lines=csv.split("\n");
    let result = [];
    let headers=lines[0].split(",");
    let that = this;
    headers = headers.map(function(h) {
      h = h.toLowerCase(); 
      h = that.camelCase(h);
      return h.trim();
    });

    for(let i=1;i<lines.length;i++){
        let obj = {};
        let currentline=lines[i].split(",");
        
        for(let j=0;j<headers.length;j++){
            if(currentline[j]){
              obj[headers[j]] = currentline[j].trim();
            } else {
            obj[headers[j]] = "";
            }
        }
        result.push(obj);
    }
    return result;
  }

• the output attach in a file for view how is the result

the function to camelcase() and toLowerCase() its only for a format that i use for my info, it's not necessary.
I hope to this info helps you and others that have this same problem, other thing, sorry for mi english, i'm learning it, hehe

@OFRBG I liked this your solution. I suggest just filtering the lines before iteration to eliminate blank lines from the csv file.

const csvToJson = csv => {
  const [firstLine, ...lines] = csv.split('\n');
  const keys = firstLine.split(',');
  // add a filter here
  return lines.filter(line => line).map(line => ((values) => 
    keys.reduce(
      (curr, next, index) => ({
        ...curr,
        [next]: values[index],
      }),
      {}
    )
  )(line.split(',')));
};