[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Create Pull Down Menu from Data in CSV File

Posted on 2004-11-10
11
Medium Priority
?
822 Views
Last Modified: 2008-03-10
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?
0
Comment
Question by:zakirdavis
  • 4
  • 4
  • 2
  • +1
11 Comments
 
LVL 3

Expert Comment

by:robotman757
ID: 12544256
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
 
LVL 63

Expert Comment

by:Zvonko
ID: 12544349
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
 

Author Comment

by:zakirdavis
ID: 12544510
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 63

Expert Comment

by:Zvonko
ID: 12544660
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
 
LVL 2

Expert Comment

by:kjayaraman
ID: 12544687
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
 

Author Comment

by:zakirdavis
ID: 12544988
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
 
LVL 2

Accepted Solution

by:
kjayaraman earned 2000 total points
ID: 12545766
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
 
LVL 2

Expert Comment

by:kjayaraman
ID: 12552422
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
 

Author Comment

by:zakirdavis
ID: 12556079
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
 
LVL 2

Expert Comment

by:kjayaraman
ID: 12577171
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
 

Author Comment

by:zakirdavis
ID: 12577179
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

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

872 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question