Create Pull Down Menu from Data in CSV File

I have a CSV file which has numerical data as well as text data. I want to be able to get certain information from this CSV file and create a pull down menue with the values from the CSV file on the fly. The CSV file will be changing periodically and will be read from a web-URL.

Req. - When i open the HTML page, the Pull-Down Menue should be created "on the fly" from the CSV file (url). How might I approach this using javascript?
zakirdavisAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

robotman757Commented:
Will the text file be in the same web space as yours? If so, you can use the filesystemobject to open the file and get the data into an array or two. What kind of menu are you looking for? What does the CSV file look like? If you want to create more than one row on your menu that will be harder to do with just CSV. If you are just looking for a list of choices that change or a single line of menu items, it would be easy enough to do.
0
ZvonkoSystems architectCommented:
If you rename the file extension from .csv to .txt then you can use this script:

<html>
<head>
<script>
function showData(theFrame){
  oRow = frames[theFrame.name].document.body.innerHTML.replace(/<[^>]+>/g,"").split("\n");
  opt = document.forms[0].mySel.options;
  for(var i=0;i<oRow.length;i++){
    oVal = oRow[i].split(";");
    opt[opt.length] = new Option(oVal[0], oVal[1]);
  }
}
</script>
</head>
<body>
<iframe name="myFrame" src="data1.txt" onLoad="showData(this)" height="0" width="0"></iframe>
<form>
<select name="mySel">
</select>
</form>
</body>
</html>

0
zakirdavisAuthor Commented:
I am looking to use the List menu (drop-down menue). I will be creating just one row at a time.  Here is a sample of the CSV file. I am looking to put the information from row 3 column 3 into the (drop-down menue) dynamically. Keep in mind, row 1 will be the header row.


---Sample of CSV (One Group)--
"COL1","COL2","COL3","COL4","COL5"
"DATA1","11/2/04 8:45:32 AM",5.769231,1,38293364953.7037
"DATA2","11/2/04 8:45:32 AM",146,1,38293364953.7037
"DATA3","11/2/04 8:45:32 AM",46,1,38293364953.7037
"DATA4","11/2/04 8:45:32 AM",41.01745,1,38293364953.7037
"DATA5","11/2/04 8:45:32 AM",37.42942,1,38293364953.7037
"DATA6","11/2/04 8:45:32 AM",240.1333,1,38293364953.7037
"DATA7","11/2/04 8:45:32 AM",2292.443,1,38293364953.7037
"DATA8","11/2/04 8:45:32 AM",87,1,38293364953.7037
"DATA9","11/2/04 8:46:02 AM",46,1,38293365300.9259
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

ZvonkoSystems architectCommented:
This script worked for me (after renaming the file to data1.txt)
It displayed the colum data below COL3

<html>
<head>
<script>
function showData(theFrame){
  oRow = frames[theFrame.name].document.body.innerHTML.replace(/<[^>]+>/g,"").split("\n");
  opt = document.forms[0].mySel.options;
  for(var i=1;i<oRow.length;i++){
    oVal = oRow[i].split(",");
    opt[opt.length] = new Option(oVal[2], oVal[2]);
  }
}
</script>
</head>
<body>
<iframe name="myFrame" src="data1.txt" onLoad="showData(this)" height="0" width="0"></iframe>
<form>
<select name="mySel">
</select>
</form>
</body>
</html>

0
kjayaramanCommented:
Simple approach

You can create a FileReader to read the csv file, get each line, split it by the field separator <comma> and then use the respective field.

Code should be something like this

BufferedReader reader = new Buff....
String[]  values = reader.readLine().split(",");

//populate your dropdown
document.all.<selectId>.options[index] = new Option('<name>', '<value>');
where selectId = id of your select viz <select id="selectId">
name = string to be displayed in the dropdown
value = value passed if the option is selected.


0
zakirdavisAuthor Commented:
I cannot rename the csv file. The CSV file is coming from a program and dumped on a web directory. I have to read the CSV file which is rought 1.5 MB. I am leaning towared khayaraman's approach.

kjayaraman

Can you give me some working code?
0
kjayaramanCommented:
Assumption: I think you know the filename

// If the file is in the same directory as your jsp... This should give you a good idea.
var fileName = window.location.href.substring(0,
     window.location.href.lastIndexOf("/") + 1) +
     "data.txt";
var url = new java.net.URL(fileName);
var connect = url.openConnection();
var input = new java.io.BufferedReader(
     new java.io.InputStreamReader(
         connect.getInputStream()));
// do this thrice if you are specific about the third row [or I mean four times]
for (var i=0; i<3; i++)
input.getLine();

var values = reader.readLine().split(",");

//now your third column should be values[2];
document.all.<selectId>.options[index] = new Option(values[2], '<value>');

connect.close();

Let me know if you need any more help.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
kjayaramanCommented:
I hope the above would have worked.

We need to look at why we need to do this. The only way to get the file from the server from a client javascript is to open a connection. This is not the best of methods. We are using only a few of the values in the file and we are passing the whole file through the network. Try out the above. But you should think about JSP to get the data from the file and then show it in your option list.

Karthik
0
zakirdavisAuthor Commented:
How can i write a function that takes the file from the external server, save it in my local directory on my machine where my javascript resides and then process it?
0
kjayaramanCommented:
Sorry for the late response. Was enjoying my holidays.

Java script is not the way to do what you said. To get a file from the external server, you should use a backend java thread. The thread would connect to the other server, check if the file has changed, copy it to your local directory [I hope by local directory you mean the server's web folder]. Your JSP [or the javascript as above, if you really insist on Javascript] should then read this file and do the presentation logic.

Note: You can do a lot of stuff with Javascript. But you should restrict it to Presentation and Validation of data. Thats the thumbrule.

Happy Diwali and Id Mubarak

Karthik
0
zakirdavisAuthor Commented:
Actually, the project specs have changed and the file will be residing physically on the server in the same path as the .js. I havent tried the code yet, but am going to. Thanks.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.