How to use papa-parse-meteor?

1

I’m new to meteor.

I have some CSV data in my DOM which I want to transform into a table-element.

I searched a bit and found this package:

https://atmospherejs.com/harrison/papa-parse

The package assumes that I know how to copy the CSV data out of my DOM into JS array.

But I cannot figure out how to do that.

The code I have so far looks like this:

<template name='dad1'>
  <h1 id='id1'>hello</h1>
  <h2 id='id2'>world</h2>
  <pre id='pre1'>
    1,2,3
    4,5,6
  </pre>
</template>

// dad1.js
if (Meteor.isClient) {
  Template.dad1.onRendered(function(){
    var myv  = this.$('id1');
    var myih = myv.html();
    var myh1 = this.find('id1');
    var myh2 = this.find('id2');})}

I cannot get any data to load into my variables.

When the above code runs, my variables stay empty (according to my browser debugger).

Question: How to use papa-parse-meteor?

1 Like
2

See this sample I made with Papa-parse

<template name="readCSV">
    <input type="file" id="csv-file" name="files"/>
    <button type="submit" class="btn btn-primary btnReadCsv">Read</button>
</template>

Template.readCSV.events({
  "click .btnReadCsv": function(event, template) {
      Papa.parse(template.find('#csv-file').files[0], {
          header: true,
          complete: function(results) {
               _.each(results.data, function(csvData) {
                   console.log(csvData.empId + ' , ' + csvData.empCode);
               });
          },
          skipEmptyLines: true
      });
   } 
 });

Additionally, you can find example from here for DOM csv https://github.com/mholt/PapaParse/tree/master/player

2 Likes
3

Thanks mate! This helped me big time!

4

I am trying to get it to work on the client:

import Papa from 'meteor/harrison:papa-parse';

...

Papa.parse(file, {
    complete: function(results) {
            console.log(results);
        }
});

However I get the error “_harrisonPapaParse2.default.parse is not a function”.

The strange thing is, when I put a breakpoint just before the parse call and run the same code in the browser console, it will work fine.

Does anyone have an idea what is going on here?

5

Never mind, since I am only using it on the client and it has no dependencies, the easiest solution is to just include its single file somewhere in the sources. Then it works fine.

6

Hey, here’s another solution from @themeteorchef - importing CSVs in case you want other approach.

1 Like
7

See https://github.com/harrisonhunter/papa-parse-meteor/issues/10
Papaparse works with npm:

npm i papaparse
import Papa from 'papaparse'

Using React 15.5 and Meteor 1.4.4.1

8

gj on digging up 1 year old thread. anyway since people might come across this from search engines, here is what i did:

Template.importList.events({
  'click #upload': function(event, template){
    event.preventDefault();
    var listId = Router.current().params._id;
    var imported = template.find('#uploadCSV').files[0];
    Papa.parse(imported, {
      header: true,
      complete(results, file){
        Meteor.call('parseUpload', results.data, listId, (error, response) => {
            if(error){
              console.log(error.rason);
            } else {
              Bert.alert('upload complete', 'success', 'growl-top-right');
            }
        });
      }
    });
  }
});

parseUpload(data, listId){
    check(data, Array);
    check(listId, String);
    var user = Meteor.user();
    let postZ = {
        name: name,
        role: role
    }
    var postY = _.extend(postZ, {
        userId: user._id,
        submitted: new Date(),
        locked: 0
    })
      Posts.insert(postY);