Load csv into array of dictionary using JavaScript

Question

My knowledge of JavaScript is limited, but I am wanting to load a CSV file into an array of dictionaries. I have attached an example of the style that I am after, however, this would have to be dynamically changed as some tables could be quite large?

Example CSV:

Vehicle ID, Vehicle Name, Category, KM
0001, Yaris, commute, 12560
0002, z350, personal, 5600
0003, Porche, business, 21040

Example Array:

var vehicles = [
        {
            "Vehicle ID": "0001",
            "Vehicle Name": "Yaris",
            "Category": "commute",
            "KM": "12560.00"
        },
        {
            "Vehicle ID": "0002",
            "Vehicle Name": "Z350",
            "Category": "personal",
            "KM": "5600.09"
        },
        {
            "Vehicle ID": "0003",
            "Vehicle Name": "Porche",
            "Category": "business",
            "KM": "21040.70"
        }
    ];

Any help would be greatly appreciated.

Cheers

is the CSV hosted on the same site as the web page? Or are yo asking how to convert CSV to javascript object? For the latter I recommend papaparse.com rather than writing your own csv parser — Jaromanda X
– Jaromanda X, Commented Aug 10, 2017 at 1:48
@JaromandaX I am creating a document automation program using HTML and JavaScript to style the PDF. So, the CSV file is in the same directory as the scripts. I am rendering the HTML to PDF using PhantomJS — matoneski
– matoneski, Commented Aug 10, 2017 at 1:50
right, so you're asking how to load the file, not how to parse it? — Jaromanda X
– Jaromanda X, Commented Aug 10, 2017 at 1:51
@JaromandaX, yes just loading it. Once I have it in the format I want, then I can deal with it. Just trying to figure that out. — matoneski
– matoneski, Commented Aug 10, 2017 at 1:53
@jezrael I noticed that the solution was using NumPy. I have undeleted the question and will add some more details about expected output. Thanks — matoneski
– matoneski, Commented Nov 16, 2022 at 6:39

AngelSalazar · Accepted Answer · 2017-08-10 02:07:30Z

2

Well if I got you, this is what you need

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="app-wrapper">
    <div>
      <label for="file">Search File </label>
      <input type="file" id="file">
    </div>
  </div>
  <script>


    (function () {
  var fileInput = document.querySelector('#file');
  var reader = new FileReader ();
  fileInput.addEventListener('change', readCSVFile);
  reader.addEventListener('loadend', processData);

  function readCSVFile (e) {
    reader.readAsText(e.target.files[0]);
  }



  function processData() {
    var allTextLines = reader.result.split(/\r\n|\n/);
    var headers = allTextLines[0].split(',');
    var lines = [];

    for (var i=1; i<allTextLines.length; i++) {

        var data = allTextLines[i].split(',');
        if (data.length == headers.length) {
            var row = {};
            for (var j=0; j< headers.length; j++) {
               row[headers[j].trim()] = data[j].trim();

            }
            lines.push(row);
        }
    }
    console.log(lines);
  }

})();
  </script>
</body>
</html>

You can check it in this link

answered Aug 10, 2017 at 2:07

AngelSalazar

3,1131 gold badge19 silver badges24 bronze badges

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

2 Comments

matoneski Over a year ago

thanks for your answer. It is close enough to what I want. I just don't need to input file option in HTML. I am looking at populating a dynamic table with the function output and printing the HTML as a PDF using PhantomJS.

matoneski Over a year ago

The console output is exactly what I am after. Thanks for that, I will just work around loading the file without an input field. Cheers.

Collectives™ on Stack Overflow

Load csv into array of dictionary using JavaScript

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related