Papaparse/vfile doesnt work- Garbled output

Question

I posted a question regarding parsing large csv files Jquery crashes while parsing large csv file. It involves reading a csv file and tablifying it. I tried using the code given in one of the responses but it doesn't work..

Here's my entire code:

<!DOCTYPE html>
 <meta http-equiv="content-type" content="text/html;charset=utf-8" />
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="PapaParse-4.1.0/papaparse.js"></script>
<script src="virtual-list-master/vlist.js"></script>
<script>
$("#fUpload").bind("change", function(evt) {
    var bigFile = evt.target.files[0];
    var rows = [];

    Papa.parse(bigFile, {
        delimiter: ",",
        newline: "\n",
        header: false,
        dynamicTyping: false,
        worker: false,
        chunk: function(results) {
            rows = rows.concat(results.data);
        },
        complete: function() {
            var list = new VirtualList({
              h: 300,
              itemHeight: 30,
              totalRows: rows.length - 1,
              generatorFn: function(row) {
                  var el = document.createElement("tr");
                  var html = '';
                  html += '<td>' + row + '</td>';
                  for(var j = 0; j < rows[row].length; j++) {
                      html += '<td>' + rows[row][j] + '</td>';
                  }
                  el.innerHTML = html;
                  return el;
              }
            });

            document.getElementById('table').appendChild(list.container)
        }
    });
});
</script>

<input type="file" id="fUpload" />
<table style="width: 100%">
    <tbody id="table">
    </tbody>
</table>

I have Papaparse-4.1.0 and virtual-list-master folders within my current working directory. But when I open this in a browser and upload a csv file, no table is printed below. There seems to be no defects in the upload function since the answerer showed a fiddle demo of the same; I'm just reusing it here. You can see the fiddle here:http://jsfiddle.net/8e99j5v9/5/

Can someone please tell me why my code doesn't work?

EDIT I thank Sergiu for proposing a working solution but the resultant table that is delivered is thoroughly garbled.. Rows and columns are overlapping like this This is how my table looks

Can someone help?

score 1 · Accepted Answer · answered Mar 10 '15 at 10:07

1

JavaScript code is interpreted/executed in the order it appears in the HTML structure. It will also only "have access" to HTML before it. So $("#fUpload") will try and find an element with id #fUpload in body, but taking into account what I said before (the order in which stuff is "loaded/executed") it won't find anything, because <input type="file" id="fUpload" /> is after this script tag.

Solutions: 1) Move the <script> tags in a head sectionand the input and table in abodysection and move the$("#fUpload").bind(...code in a$(document).ready` callback. (Read about it here)

2) Move the input and table above the script tags.

Why will 1 work? Because of $(document).ready(.... This tells the code inside of it to execute after the whole HTML (including the input) was loaded.

answered Mar 10 '15 at 10:07

Sergiu Paraschiv

9,929
5
36
47

Thank you!! It works perfectly well now! You make my day. I tried solution 2. But why are the output rows overlapping onto one another? – Tania Mar 10 '15 at 11:33
The rows and columns have no demarcations. The entries sit atop each other. Why is that happening? The tr element is not created. – Tania Mar 10 '15 at 11:41
Works for me in Chrome so it's probably some cross-browser CSS issue (you are testing this in Firefox, right?). – Sergiu Paraschiv Mar 10 '15 at 11:45
Yes I get a scroller, and the rows and columns are overlapping... I got the same issue when uploading into your fiddle.. Why is that happening? – Tania Mar 10 '15 at 11:48
I added this in the end
HiBye HiBye HiBye . This table is rendered well but the table created by the uploaded csv file is messy :( Can you please help? – Tania Mar 10 '15 at 11:52
I have added the image in my question – Tania Mar 10 '15 at 11:58
vlist only works with fixed height/width rows. First of all you'll need to make sure your rows don't overflow horizontally - so either make the table wide enough so that text never spans multiple lines _or_ limit text length in each cell. Then you need to know how high a row should be and adjust the `itemHeight: 30` config accordingly. There are virtualized list implementations that can handle heterogeneous row heights (jQList), but I don't think you need that. – Sergiu Paraschiv Mar 10 '15 at 12:07
I don't get you. Can you please edit my question or provide the snippet that does this? or is there any other alternatives to this? All I'm worried about is the table's formatting. The parsing works fine but the formatting is what is needed now – Tania Mar 10 '15 at 12:31
It really depends on what data you are trying to display. Can you show us a few lines from the CSV you are using? – Sergiu Paraschiv Mar 10 '15 at 12:48
path,filename,comments path/to/my/file1,TaniaGeraldina.txt,Insert Comment here longer/path/to/file2,HazelGeraldina.txt,Insert Comment here – Tania Mar 11 '15 at 09:32

Papaparse/vfile doesnt work- Garbled output

1 Answers1

Linked