Using JavaScript to step through a CSV

Question

So I have a csv file as follows

Name1,url1
Name2,url2
Name3,url3

I would like to create a javascript(can also use PHP if needed) to go through each line of the csv, and compare the Name, to the website. The picture the page being top left quadrant just a box that shows the "name", the right half of the page loads the url and the bottom left guadrant has a left and right arrow that you can click to move through the CSV.

I am considering iFrames to breakup the page. The real challenge is loading in the CSV. I was considering doing this with php, and placing all the data into the html page, but if my CSV is large this might be a problem.

Am I going about this problem in the correct way?

Answer 1

In PHP you will want to use fgetcsv().

<?php
if (($handle = fopen("test.csv", "r")) !== FALSE) {
    while (($data = fgetcsv($handle, 1000, ",")) !== FALSE) {
        list($name, $url) = $data;
        // do something with $name and $data
    }
    fclose($handle);
}

Just bear in mind a few things:

• If this file needs to be read frequently you're going to run into I/O problems.
• If this file needs to be written to frequently you're going to run into I/O problems much more quickly.
• Try not to store any more than the bear minimum of rows in memory, otherwise you may bump up against PHP's memory limits.
• CSV bad, database good.

Answer 2

I did something like this once before. Made an AJAX call to get the CSV (using jQuery):

var x = $.ajax('schedule.csv').done( function(){parse(x);});

Then parsed the data like this:

function parse (data)
{
    cells=[];
    rowBreaks = [];
    rowCounter=0;
    var cellCounter=0;
    var inQuotes = false;

    y=data.responseText;
    console.log(y.length);
    for(n=0; n<y.length; n++)
    {
        if(n == 0 & y[n] != ",")
            cells[cellCounter]=y[n];
        if(n != 0 && y[n] != ',')
        {
            cells[cellCounter]+=y[n];
        }
        if(y[n] == '"')
            inQuotes = !inQuotes;
        if(n>0 && !inQuotes && y[n] == ",")
        {
            if(cells[cellCounter] == undefined)
                cells[cellCounter] = " ";
            else
                cells[cellCounter]+=" ";
            cellCounter++;
        }
        if(n>0 && !inQuotes && (y[n] == "\n" || y[n] == "\r"))
        {
            rowBreaks[rowCounter] = cellCounter;
            rowCounter++;
        }
        if(cells[cellCounter] == undefined)
            cells[cellCounter] = "";
    }
    fixRows();
    writeTable();
    $("body").css("overflow-x", "auto");

}

You shouldn't need all that, but it'll parse a CSV file pretty handy. If it helps, the writeTable() function looked like this:

function writeTable()
{
    table=$("<table border='1' cellpadding='1' />");
    var q;
    var rowBlank;
    var rowLength = rowBreaks[0]-8;
    for(z=0; z<rowBreaks.length; z++)    
    {
        tr = $("<tr />");
        if(z == 0)
            tr.addClass("header");
        rowBlank = true;
        for(i=0; i<rowLength; i++)
        {
            q=(z)*25+i;
            td=$("<td />").html(cells[q]);
            tr.append(td);
            if(cells[q] != " " && cells[q] != "" && cells[q] != "\n" && cells[q] != "\r")
                rowBlank = false;
        }
        /*if(!rowBlank)*/
        table.append(tr);
    }

    table.css({
        "border-spacing"    : 0,
        "width"             : "100%",
        "height"            : "99%"

    });

    $("#schedule").html("");
    $("#schedule").append(table);
    sizeTable();
}

It's ugly, but it worked for me.

Note, this is all real code, so you don't need the console.log()'s I used for debugging, or to keep any of the variable names. This was used to parse an 80 x 20 excel sheet saved as an excel file before I got the company to switch to Google Docs, so it's pretty robust in terms of size of CSV file.