How to format csv to html table rows and columns using Javascript

Question

How can I take the following chunk of csv data and convert it to tr's and td's, using javascript?

Jess,Female,04/26/1990,North Central College,Aix,Spring 2012,WebApp,
MC,Female,04/27/1991,Carnegie Mellon University,Aix,Spring 2012,WebApp,
Sharon,Female,04/03/1967,Hobart and William Smith Colleges,Aix,Spring 2012,WebApp,
Nancy,Female,08/15/1989,The New School,Aix,Spring 2011,WebApp,
Jacqueline,Female,03/18/1991,University of South Carolina,Aix,Spring 2011,WebApp,
Sydney,Female,12/11/1990,University of Vermont,Aix,Spring 2011,WebApp,
Kelsey,Female,12/08/1989,University of Vermont,Aix,Spring 2011,WebApp,
Oktavia,Female,11/05/1990,SUNY - Albany,Aix,Spring 2011,WebApp,
Courtney,Female,12/02/1988,Ithaca College,Aix,Spring 2009,WebApp,
Nike,Female,24.2.1989,Appleby College,Aix,Spring 2008,WebApp,
Linda,Female,8/26/1964,Kalamazoo College,Aix,Spring 2009,WebApp,
Allison,Female,12/15/1976,University of San Diego,Aix,Spring 2009,WebApp,
Carmen,Female,02/07/1988,Carnegie Mellon University,Aix,Spring 2008,WebApp,
Nora,Female,10/23/88,Eastern Washington University,Aix,Spring 2009,WebApp,
Jennifer,Female,10/27/79,University of Kansas,Aix,Spring 2009,WebApp,

Desired Table Format for each of the lines in the csv data.

<tr><td>Jess</td> <td>Female<td><td>04/26/1990</td><td>North Central College</td><td>Aix</td><td>Spring 2012</td><td>WebApp</td></tr>

Sorry, Yes JavaScript and the csv data is retrieved via Ajax. Just updated the question. — Carl Weis
– Carl Weis, Commented Jan 5, 2013 at 1:46
@CarlWeis Yes, but how are you getting the data in to Javascript? — Lee Taylor
– Lee Taylor, Commented Jan 5, 2013 at 1:47

nnnnnn · Accepted Answer · 2013-01-05 01:50:01Z

11

Assuming you have that CSV data in a variable (whether retrieved via Ajax or whatever) then you can use the .split() method to get an array of lines and split each line on commas:

var data = // your data
var lines = data.split("\n"),
    output = [],
    i;
for (i = 0; i < lines.length; i++)
    output.push("<tr><td>"
                + lines[i].slice(0,-1).split(",").join("</td><td>")
                + "</td></tr>");
output = "<table>" + output.join("") + "</table>";

(The string .slice() is to ignore the trailing commas on each line.)

Demo: http://jsfiddle.net/frvQ2/

answered Jan 5, 2013 at 1:50

nnnnnn

150k30 gold badges210 silver badges247 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Carl Weis Over a year ago

How would I do the reverse. Take the html just the tr's and td's and convert those to the csv format? Because it's not working with some of the data I have.

nnnnnn Over a year ago

yourHTML.replace(/<tr>|<td>/g,"").replace(/<\/td>/g,",").replace(/<\/tr>/g,"\n") would turn a string of tr and td elements back into CSV. Or adapt the code in my answer to split on the tags and join on commas and newline characters...

Josh Bedo Over a year ago

keep getting object has no method push

nnnnnn Over a year ago

@josh - .push() is an array method. Is your object an array as shown in my answer?

nnnnnn Over a year ago

@josh - I'm not sure what you mean by "cache it" - the i variable the way I did it has exactly the same scope as the way you showed in your comment (JS doesn't have block scope for variables declared with var, only function scope, so your change would have no effect on execution).

|

Kernel James · Accepted Answer · 2013-01-05 02:37:44Z

3

How about:

var data = //your data

data = "<table><tr>" + 
  data.replace(/,\n/g,"<tr>")
      .replace(/,/g, "<td>")
      .replace(/<tr>$/,"") +
  "</table>";

answered Jan 5, 2013 at 2:37

Kernel James

4,1421 gold badge32 silver badges40 bronze badges

2 Comments

Bruno Over a year ago

This does not include proper end tags. For example </tr>

Kernel James Over a year ago

The end tags are optional for TR and TD. w3.org/TR/html401/struct/tables.html#h-11.2.5

Collectives™ on Stack Overflow

How to format csv to html table rows and columns using Javascript

2 Answers 2

10 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related