0

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 ?

Improve this question
19
  • "In order to read it manually this is what has been done jsfiddle.net/5Lv8gkqv" Put the relevant code (and only the relevant code) in the question, don't just link. This is one of the fundamentals of questions and answers on SO.
    – T.J. Crowder
    Commented Nov 3, 2014 at 8:53
  • The emphasis is on relevant code. Even your links contains a lot of unrelated d3-code.
    – Sirko
    Commented Nov 3, 2014 at 8:55
  • 1
    First, I'm fairly sure Javascript cannot access local files for any reason, as that seems like an enormous security risk. Second, You'd have to get the CSV string from a Server Side element and pass it to your javascript. Third, you'd have to then create a function to manually parse the data into an object.
    – Nunners
    Commented Nov 3, 2014 at 8:57
  • Hi all. @Sirko Ive added the relevant JS code. Please have a look and help
    – user4197202
    Commented Nov 3, 2014 at 8:57
  • 1
    @rzach Every server side language can read CSV ex: w3schools.com/php/func_filesystem_fgetcsv.asp, from there I'd send the data in JSON format via AJAX to your script, once it arrives client side your code seems to be ok at displaying it. PS: I'd sugest tagging this question with the server side language you're going to use.
    – George Bora
    Commented Nov 3, 2014 at 9:12

2 Answers 2

Reset to default
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())
Improve this answer
0

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