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 http://papaparse.com/ rather than writing your own csv parser — Jaromanda X, Aug 10 '17 at 01: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, Aug 10 '17 at 01:50
right, so you're asking how to load the file, not how to parse it? — Jaromanda X, Aug 10 '17 at 01: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, Aug 10 '17 at 01:53
@matoneski - Do you need sort values or sum? I ask for deleted question. — jezrael, Nov 16 '22 at 06:30
@jezrael I was looking to take the top four values and add the sum to a new column. You link helped with that. Thanks. I deleted due to a duplicate answer that I overlooked. — matoneski, Nov 16 '22 at 06:33
@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, Nov 16 '22 at 06:39

score 2 · Accepted Answer · answered Aug 10 '17 at 02:07

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

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, Aug 10 '17 at 02:13
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. — matoneski, Aug 10 '17 at 02:16

Load csv into array of dictionary using JavaScript

1 Answers1