How to convert CSV Data to JSON Object

Question

So I have this csv file (the csv file might sit on server side preferably , but not decided yet). Most probably the user will be presented the options of selecting from these csv files from a drop-down menu. Then after selcting a particular file, user clicks "enter" , then this selected csv file should be read in javascript as an array. So how to do this ?? :-

My question is on the lines of How to pass variables and data from PHP to JavaScript?

___csv_file____

Class,      Subclass,           Company,    Product,
Chocolate,  Wafer chocolate,    Nestle, KitKat,
Chocolate,  White chocolate,    Nestle, Milkybar,
Chocolate,  White chocolate,    Nestle, Milkybar,
Chocolate,  Caramel chocolate,  Nestle, BarOne,
Chocolate,  Milk chocolate,     Nestle, Nestle Milk chocolate,
Chocolate,  Milk chocolate,     Nestle, Nestle Milk chocolate,
Chocolate,  Milk chocolate,     Nestle, Nestle Milk chocolate,
Chocolate,  Milk chocolate,     Nestle, Nestle Milk chocolate,
Chocolate,  Milk chocolate,     Cadbury,    Dairy milk,

In order to read it manually this is what has been done. But as you can see it has all the csv_data hardcoded, but I'd like to get it automated (i.e. get generated by reading from a csv file )

    root = {
 "name": "Chocolate", "tag":"class",
 "children": [
  {
   "name": "Wafer", "tag":"subclass",
   "children": [
    {
      "name": "Nestle", "tag":"company",
     "children": [
      {"name": "KitKat", "tag":"product"}
     ]
    }
   ]
  },

  {
   "name": "White", "tag":"subclass",
   "children": [
    {
      "name": "Nestle", "tag":"company",
     "children": [
      {"name": "Milkybar", "tag":"product"}
     ]
    }
   ]
  },

    {
   "name": "Caramel", "tag":"subclass",
   "children": [
    {
      "name": "Nestle", "tag":"company",
     "children": [
      {"name": "BarOne", "tag":"product"}
     ]
    }
   ]
  },    
    {
   "name": "Milk", "tag":"subclass",
   "children": [
    {
      "name": "Nestle", "tag":"company",
     "children": [
      {"name": "Nestle Milk", "tag":"product"}
     ]
    },  {
      "name": "Cadbury", "tag":"company",
     "children": [
      {"name": "Dairy Milk", "tag":"product"}
     ]
    }
   ]
  }




 ]
};

The problem now is that I want the javascript to just read this csv file from local location. But hows it possible to read a CSV file into such a complex dimensional array in JAVASCRIPT ?

Answer 1

Possible setup:

PHP web server (or NodeJS server - my personal favourite)

Possible workflow:

• php upload page for CSV file / or upload by FTP/SSH
• csv is on server
• php page with param datafromid=csvfile provides the data conversion from csv to json.. (if the csv file does not contain too many rows, read it into an php array, and spit it out with json_encode() by getting each row (fgetcsv()) and adding a sub-array to your total array)
• depending on how you provide the data to d3, use ajax to access that php-page to access the json or include it in your page (i think loading it by ajax, accessing the file from the browser where the page lies, is better - you may use jQuery get())

Answer 2

First off on the server create a PHP file giving it a relevant name like candyData.php in which you'd have:

//code to read your data.csv
//code which stores the data from the csv into an object $candyData
$json = json_encode($candyData);
return $json

Then on the client side with Javascript and I'm going to also use JQuery:

jQuery.ajax({
    url: "http://example.mysite.com/rest/candyData.php",
    type: "GET",
    success: function (response) {
        var candyData = response;
        //Here you'd put all the code you currently have so you can visualize the data
    },
    error: function (response) {
        console.log("failed");
    }
});