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>

Solution 1

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/

Solution 2

How about:

var data = //your data

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