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?

What are you really asking here, can you distill it down a bit? Like, "how can I load a CSV file so that I can examine it with JavaScript?". As it stands, your question is very broad in scope. — Madbreaks
– Madbreaks, Commented Apr 25, 2013 at 21:52
I have a bunch of names of places, and urls that go along with them. I have over 10,000 I have to go through and visually inspect that each one is correct. So I am trying to create a javascript page that will make this easier — Dan Ciborowski - MSFT
– Dan Ciborowski - MSFT, Commented Apr 25, 2013 at 21:55
Can you show an example (in text form, or using jsfiddle.net) what you expect to have from a line "name,www.name.com" ? — Grzegorz
– Grzegorz, Commented Apr 25, 2013 at 22:04
Using frames is never the correct way, it may be the only way in some cases, but it's not the correct way. — Ruan Mendes
– Ruan Mendes, Commented Apr 25, 2013 at 22:18
Your question is asking how to implement something which is not a good fit for SO. SO is for "Here's my code, it should do A but it's doing B when I do X,Y,Z". — Ruan Mendes
– Ruan Mendes, Commented Apr 25, 2013 at 22:20

Jason Nichols · Accepted Answer · 2013-04-25 21:59:20Z

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.

Community · Accepted Answer · 2023-11-17 19:22:09Z

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.

edited Nov 17, 2023 at 19:22

CommunityBot

11 silver badge

answered Apr 25, 2013 at 22:14

Sammitch

32.5k7 gold badges58 silver badges93 bronze badges

2 Comments

Dan Ciborowski - MSFT Over a year ago

So instead of storing my raw data in an CSV, you think I should use a database to store the data instead? If so then I would place my data in an MySQL(My prefered database, feedback welcome if you feel otherwise), and use php/javascript to connect to that database and load the data?

Sammitch Over a year ago

@djc391 In the majority of cases it would be better to store large quantities of data like this in a SQL database. Immediate benefits would be things like indexing, query caching, more fluid integration with other data [other tables], as well as being able to offload data operations to another server.

Collectives™ on Stack Overflow

Using JavaScript to step through a CSV

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related