I need help with .csv and Javascript

@jac378Jan 14.2010

Hello people,

First I am new here and the most important thing is that I do not know javascript. I am starting to read about it, and eventually I will learn it.

But I need to do something right now and did some research, found a few things but none of them were what I want it.

On my website, there is a contact form that will create a .csv storing data like:
name, city, problem
name1, city1, problem1
name2, city2, problem2

Were each line will be different and this csv file will grow as people submit their data, so there is no limit in how many lines.

I want to take that data with javascript and write it to an html page, like this:

<h1>name</h1>
<h2>city</h2>
problem

or using a tag with a class for each and css will do the rest.

In my page I have to see every submit thatI have received from my contact form.

name 1
city 1
problem 1
name 2
city 2
problem 2
name 3
city 3
problem 3

etc…

I just need to import that cvs data into a html file, then I will do what ever I need in css.

Any ideas?

Thanks a lot…

to post a comment

JavaScript

10 Comments(s) _↴

@harrierdhJan 14.2010 — #You could create html and open it in a new window. However, you can not write out to a .csv file or any file from Javascript. Is that what you meant?

It sounds like your doing client side coding and what you need is server side coding.

@jac378authorJan 14.2010 — #The cvs file is going to be in my server, a page (html) will display the data contained in the csv file with all my styles etc...

Example in Javascript you can do something like this: (I dont know javascript remember)

document.write("Hello World")

that "Hello World" its going to be writen in the html page.....

I want to somehow take from the csv file the data that is stored:

document.write( " name, city, problem " )

I am doing it manually, copy and paste , but I think in javascript can be done..

@Declan1991Jan 14.2010 — #I think it may be possible, but if at all possible, use a server-side language. JavaScript is not available for everyone.

First, you need to use [url=http://www.yourhtmlsource.com/javascript/ajax.html]AJAX[/url]. I'm sure there is a script, either on that page or any other tutorial, that you can virtually copy and paste. Then, you need to parse the file.

<i>
 </i>var string = "What came from your AJAX";
 string = string.replace(/^(.+),(.+),(.+)$/mg,"&lt;div&gt;&lt;h1&gt;$1&lt;/h1&gt;&lt;h2&gt;$2&lt;/h2&gt;&lt;p&gt;$3&lt;/p&gt;&lt;div&gt;");
 document.write(string);

That should be a start for you anyway. The only difference should be that instead of string, you will be using xmlhttp.resposeText, or something like that. Give it a go, and you can ask if you have further problems.

@rnd_meJan 14.2010 — #i don't know why everyone is nay-saying, your task is trivial:

[CODE]
 function parseCSV(str){
 var  stack=[], ob=[], float="", inQuotes=false;
 for( var i=0; i<str.length;i++){
 var it=str[i];
 if(it==='"'){  inQuotes=!inQuotes; if(str[i-1]==='"'){float+='"';} continue; }
 if(it===","){ if(!inQuotes){ob.push(float); float="";}else{float+=",";} continue;}
 if(it==="n"){ ob.push(float); stack.push(ob); float=""; ob=[]; continue;}
 float+=it;
 }
 ob.push(float); stack.push(ob);
 return stack;
 }
 
 
 function IO(U, V) {
 var X = !window.XMLHttpRequest ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest;
 X.open(V ? "PUT" : "GET", U, false);
 X.setRequestHeader("Content-Type", "text/html");
 X.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT");
 X.send(V ? V : "");
 return X.responseText;
 }
 
 
 var filename="data.csv"; //string .csv data
 var csv= IO(filename); //array of arrays
 alert(csv.join("n"));[/CODE]

@jac378authorJan 14.2010 — #That code only works in the server side? or I can test it here in firefox for example?

I mean do I have to upload the files data.csv test.html file to the server in order for it work?

@rnd_meJan 14.2010 — #That code only works in the server side? or I can test it here in firefox for example?

I mean do I have to upload the files data.csv test.html file to the server in order for it work?[/QUOTE]

the page and .csv must be in the same folder as coded, and the same server always.

it should work just fine from a static http server, no need for php or asp...

@jac378authorJan 14.2010 — #This my html and does not work:

[CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Untitled Document</title>
 </head>
 <script type="text/javascript">
 
 
 function parseCSV(str){
 
 var  stack=[], ob=[], float="", inQuotes=false;
 for( var i=0; i<str.length;i++){
 var it=str[i];
 if(it==='"'){  inQuotes=!inQuotes; if(str[i-1]==='"'){float+='"';} continue; }
 if(it===","){ if(!inQuotes){ob.push(float); float="";}else{float+=",";} continue;}
 if(it==="n"){ ob.push(float); stack.push(ob); float=""; ob=[]; continue;}
 float+=it;
 }
 ob.push(float); stack.push(ob);
 return stack;
 }
 
 
 function IO(U, V) {
 var X = !window.XMLHttpRequest ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest;
 X.open(V ? "PUT" : "GET", U, false);
 X.setRequestHeader("Content-Type", "text/html");
 X.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT");
 X.send(V ? V : "");
 return X.responseText;
 }
 
 
 var filename="testimonio.csv"; //string .csv data
 var csv= IO(filename); //array of arrays
 alert(csv.join("n"));
 
 </script>
 <body onload="parseCSV(str)">
 <h1>My Page Works</h1>
 </body>
 </html>[/CODE]

@rnd_meJan 14.2010 — #

[CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Untitled Document</title>
 </head>
 <script type="text/javascript">
 
 
 function parseCSV(str){
 
 var  stack=[], ob=[], float="", inQuotes=false;
 for( var i=0; i<str.length;i++){
 var it=str[i];
 if(it==='"'){  inQuotes=!inQuotes; if(str[i-1]==='"'){float+='"';} continue; }
 if(it===","){ if(!inQuotes){ob.push(float); float="";}else{float+=",";} continue;}
 if(it==="n"){ ob.push(float); stack.push(ob); float=""; ob=[]; continue;}
 float+=it;
 }
 ob.push(float); stack.push(ob);
 return stack;
 }
 
 
 function IO(U, V) {
 var X = !window.XMLHttpRequest ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest;
 X.open(V ? "PUT" : "GET", U, false);
 X.setRequestHeader("Content-Type", "text/html");
 X.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT");
 X.send(V ? V : "");
 return X.responseText;
 }
 
 
 function doCSV(){
 var filename="testimonio.csv"; //string .csv data
 var csv= IO(filename); //array of arrays
 alert(csv.join("n"));
 }
 </script>
 <body onload="doCSV(str)">
 <h1>My Page Works</h1>
 </body>
 </html>[/CODE]

@jac378authorJan 14.2010 — #Thanks for you help....but still does not show anything.

This is what the csv will have.

Adrian, White Plains, One Problem,

Adrian, White Plains, Two Problems,

Adrian, White Plains, Three Problems,

Adrian, White Plains, Four Problems,

I saw you changed

<body onload="doCSV(str)"> which I did..

Thanks

@rnd_meJan 14.2010 — #Thanks for you help....but still does not show anything.

...

<body onload="doCSV(str)"> which I did..

Thanks[/QUOTE]

whoops, that should be
[CODE]<body onload="doCSV()"> [/CODE]

the following tests just fine in firebug:

[CODE]
 r="Adrian, White Plains, One Problemn
 Adrian, White Plains, Two Problemsn
 Adrian, White Plains, Three Problemsn
 Adrian, White Plains, Four Problems";
 
 function parseCSV(str){
 
 var  stack=[], ob=[], float="", inQuotes=false;
 for( var i=0; i<str.length;i++){
 var it=str[i];
 if(it==='"'){  inQuotes=!inQuotes; if(str[i-1]==='"'){float+='"';} continue; }
 if(it===","){ if(!inQuotes){ob.push(float); float="";}else{float+=",";} continue;}
 if(it==="n"){ ob.push(float); stack.push(ob); float=""; ob=[]; continue;}
 float+=it;
 }
 ob.push(float); stack.push(ob);
 return stack;
 }
 
 alert(parseCSV(r)[0].join("n"))[/CODE]

Also in #JavaScript _↴

Passing JS values into radio button values function show image How to go to a location within a document?

Success!

Help @jac378 spread the word by sharing this article on Twitter...

Tweet This

I need help with .csv and Javascript

10 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

I need help with .csv and Javascript

10 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

10 Comments(s) _↴

Also in #JavaScript _↴