iwek/csv-to-json.js

anubhav12 · 2015-12-16T09:11:39Z

How to read the csv file ?? Please help

MakkaHareesh · 2016-02-02T08:55:59Z

how to pass csv file in function in using html

jssuttles · 2016-05-10T22:28:23Z

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/

hafizaarif · 2016-07-27T15:14:55Z

what if the csv file is more than 1 GB

keshavnagpal · 2016-07-29T06:33:57Z

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

jerrymartins · 2017-07-15T16:19:22Z

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;
}

adhimafauzans · 2017-07-28T07:27:13Z

@jonmaim thx mate

DMRE · 2017-11-03T08:25:27Z

Thanks ! 👍

patmccormick · 2018-02-20T20:37:34Z

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.

ramonnteixeira · 2018-02-22T14:20:46Z

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
}
`

DollarAkshay · 2018-03-08T12:36:11Z

Anyone reading this,
PLEASE DONT USE THIS

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

stephanie-kuo · 2018-03-08T18:19:15Z

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

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

317073033 · 2018-04-01T13:27:30Z

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
}

lucasdu4rte · 2018-04-02T13:12:46Z

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
}

kirkness · 2018-04-12T17:31:42Z

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],
      }),
      {}
    )
  );
};

fairkmitl · 2018-09-04T10:32:41Z

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");
  }
}

OFRBG · 2019-01-02T08:07:08Z

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(',')));
};

manas-sahu · 2019-01-10T05:52:00Z

//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>

php14 · 2019-02-15T22:23:00Z

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

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

hassanshaikley · 2019-02-26T22:59:58Z

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

Open developer tools / console
Paste the function in
Paste the CSV in like so

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

Run the function

csvJSON(csv)

GuillermoBI · 2019-10-09T18:13:32Z

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

Najwa199756 · 2020-02-18T15:33:28Z

@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 ....?

GuillermoBI · 2020-02-18T17:24:57Z

@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

waicampos · 2023-08-26T14:08:33Z

@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(',')));
};

iwek/csv-to-json.js

anubhav12 commented Dec 16, 2015

MakkaHareesh commented Feb 2, 2016

jssuttles commented May 10, 2016

hafizaarif commented Jul 27, 2016 •

edited

Loading

keshavnagpal commented Jul 29, 2016

jerrymartins commented Jul 15, 2017

adhimafauzans commented Jul 28, 2017

DMRE commented Nov 3, 2017

patmccormick commented Feb 20, 2018

ramonnteixeira commented Feb 22, 2018 •

edited

Loading

DollarAkshay commented Mar 8, 2018

stephanie-kuo commented Mar 8, 2018

317073033 commented Apr 1, 2018 •

edited

Loading

lucasdu4rte commented Apr 2, 2018 •

edited

Loading

kirkness commented Apr 12, 2018

fairkmitl commented Sep 4, 2018

OFRBG commented Jan 2, 2019 •

edited

Loading

manas-sahu commented Jan 10, 2019

php14 commented Feb 15, 2019

hassanshaikley commented Feb 26, 2019 •

edited

Loading

GuillermoBI commented Oct 9, 2019

Najwa199756 commented Feb 18, 2020

GuillermoBI commented Feb 18, 2020

waicampos commented Aug 26, 2023

	//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
	}

iwek/csv-to-json.js

anubhav12 commented Dec 16, 2015

MakkaHareesh commented Feb 2, 2016

jssuttles commented May 10, 2016

hafizaarif commented Jul 27, 2016 • edited Loading

keshavnagpal commented Jul 29, 2016

jerrymartins commented Jul 15, 2017

adhimafauzans commented Jul 28, 2017

DMRE commented Nov 3, 2017

patmccormick commented Feb 20, 2018

ramonnteixeira commented Feb 22, 2018 • edited Loading

DollarAkshay commented Mar 8, 2018

stephanie-kuo commented Mar 8, 2018

317073033 commented Apr 1, 2018 • edited Loading

lucasdu4rte commented Apr 2, 2018 • edited Loading

kirkness commented Apr 12, 2018

fairkmitl commented Sep 4, 2018

OFRBG commented Jan 2, 2019 • edited Loading

manas-sahu commented Jan 10, 2019

php14 commented Feb 15, 2019

hassanshaikley commented Feb 26, 2019 • edited Loading

GuillermoBI commented Oct 9, 2019

Najwa199756 commented Feb 18, 2020

GuillermoBI commented Feb 18, 2020

waicampos commented Aug 26, 2023

hafizaarif commented Jul 27, 2016 •

edited

Loading

ramonnteixeira commented Feb 22, 2018 •

edited

Loading

317073033 commented Apr 1, 2018 •

edited

Loading

lucasdu4rte commented Apr 2, 2018 •

edited

Loading

OFRBG commented Jan 2, 2019 •

edited

Loading

hassanshaikley commented Feb 26, 2019 •

edited

Loading