CODEWITHSUNDEEP
javascriptjquerycsv
Oloff Biermann
Oloff Biermann

Reputation: 716

Issue with Parsing CSV File

So I wrote a program to get two CSV files containing water level data from a domain. The data is stored as an array of objects and then added to two tables on my page.

I'm using JQuery CSV to parse the file.

The problem I'm having is that the formatting of the file is not very good (see below) and it's causing some of the data to be returned as undefined. I know everything else is working because I am getting a table with some of the data displayed correctly.

Does anyone know what I should do in my code to fix this so Water Level is stored correctly?

Example of CSV File annoying formatting (The first two lines below are actually all on one line in the CSV:

   ID,Date,Water Level / Niveau d'eau (m),Grade,Symbol / symbole,QA/QC,Discharge / Débit (cms),Grade,Symbol / Symbole,QA/QC

08MG022,2015-07-22T00:00:00-08:00,9.440,,,1,0.000,,,1
08MG022,2015-07-22T00:05:00-08:00,9.435,,,1,0.000,,,1
08MG022,2015-07-22T00:10:00-08:00,9.436,,,1,0.000,,,1
08MG022,2015-07-22T00:15:00-08:00,9.439,,,1,0.000,,,1
08MG022,2015-07-22T00:20:00-08:00,9.433,,,1,0.000,,,1
08MG022,2015-07-22T00:25:00-08:00,9.441,,,1,0.000,,,1
08MG022,2015-07-22T00:30:00-08:00,9.439,,,1,0.000,,,1

My code:

              $(function() {
$.ajax({
    type: "GET",
    url: "http://crossorigin.me/http://dd.weather.gc.ca/hydrometric/csv/BC/hourly/BC_08MH001_hourly_hydrometric.csv",   //CSV file for Vedder data, note use of CORS Proxy.
    dataType: "text",
    success: function(data) {getWL(data);
                $(function() {
                    $("#vedTable").makeTable();
                    });
                }
 });


 $.ajax({
    type: "GET",
    url: "http://crossorigin.me/http://dd.weather.gc.ca/hydrometric/csv/BC/hourly/BC_08MG022_hourly_hydrometric.csv",       //CSV file location for Chehalis data, uses. CORS proxy
    dataType: "text",
    success: function(data) {getWL(data);
                $(function() {
                    $("#chehaTable").makeTable();
                    });
                }
 });
 });


function getWL(data){

var waterArray = $.csv.toObjects(data);                                 //Water level data parsed and added to array. jquery-csv used here.

$(function() {

    $.fn.makeTable = function(){    
    var _elem = $(this);                                    

    var output = '<table class="generaltable"><tr><th>Date</th><th>Water Level</th></tr>';


    for (var j in waterArray){
        output+= '<tr><td>' +waterArray[j].Date+ '</td><td>' +waterArray[j].Date+ '</td></tr>';

        }
        output +="</table>";


    return _elem.append(output);
    };
});

}

Upvotes: 1

Views: 75

Answers (1)

JohnnyFun
JohnnyFun

Reputation: 4293

Use this value for the second column: waterArray[j]['Water Level / Niveau d\'eau (m)'] (note the escape of the single-quote) to get the water level data.

btw, their nifty little tool was helpful in determining the issue: http://jquery-csv.googlecode.com/git/examples/basic-usage.html

Upvotes: 1

Related Questions