Pass event object into template using Meteor

Question

I am building an application for customizing the product grid order of an e-commerce website. Being able to present product order in responsive and flexible ways, would really make it easier for project managers to create a better experience for their customers.

Part of this grid order application is based on an article by Ryan Glover (to whom I owe many thanks), called Importing CSV's https://themeteorchef.com/tutorials/importing-csvs, using PapaParse.

Even though this the templates and build is in Meteor, this is a bit of a vanilla JavaScript question.

Here's my pretty stripped down question: How do I get the event object into the template? I get the event object fine from the Papa.parse() function, and could console.log(it). But, how do I pass the event object into the template.

import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';
import './main.html';

// NOTE: trying to figure out how to pass event object to template
Template.upload.events({
  'change [name="uploadCSV"]' ( event, template ) {
  // Handles the conversion and upload
    var fileInput = document.querySelector('[name="uploadCSV"]');

    // Parse local CSV file
    Papa.parse(fileInput.files[0], {
      header: true,
        complete: function(results) {
            // console.log(results); // includes data, error, and misc

// NOTE: This is the data object to send to the template
        let itemData = results.data;
        console.log(itemData) // here is the data object

        // This test correctly iterates over the object, but should be done in the template
        itemData.forEach(function(item) {
          console.log(item)
          // console.log(item['itemcode'])
        });

// HELP! How do I send the object itemData to the template?

        } // END complete
    }); // END parse

  } // END change
}) // END events

Here is a link to the repo. https://github.com/dylannirvana/gridorderapp/tree/master/meteor/vanilla

This has got to be embarrassingly easy. Many thanks in advance!

You say `event` object, which I'm assuming you mean the event parameter from the `change` event, but your code mentions passing the data from the parse results. Which is correct? — chazsolo, Nov 08 '18 at 17:39
Either way - you can use `Session` or consider storing the results into your database to subscribe to in the same template (if you want to persist them) — chazsolo, Nov 08 '18 at 17:42
The parse results. I want to pass this event data to the template. I am trying to link with reactiveVar, but keep getting a typeError. I couldn't get the db to work either for some reason. — Dylan Nirvana, Nov 08 '18 at 21:18

score 1 · Answer 1 · answered Nov 08 '18 at 19:24

looking on your project will make clear that this piece will not be ready to go. Your question is not somethin about events but understanding meteor. The are essentials missing.

First check your grid template, there is no data defined. Second, understand Papa.parse on client and on server via Meteor.method

Not sure how you concept should run, but lets assume, that someone should be able to upload an CSV file with data to show in page.

Is this something which is persistant data? Means, should the data be stored or will it be uploaded all the time?

In case of persistant, you should use Meteor.method and a publish and subscribe collection from server to client. You may have a look at the meteor blaze todo app tutorial.

In case of temporary data, you may create a client only minimongo collection and subscribe the client to that.

While getting data from Parser you have to insert or add that content to your local or global collection.

When doing this and having a reactive (subscribed) template to the collection it will automtically show its content.

Again, you should get familar with the meteor blaze todo tutorial, to understand your needs.

Hope that will guide you the right way.

Good luck Tom

Thank you Tom. Indeed. I am trying to understand the control flow by making it very simple like this. I will use the scaffolding and templating approach provided by Blaze. First however, in the simple interest of watching this data, I want to pass the result object from Papa.parse in the events template, into the grid template, without resorting to trying to manipulate the UI. That is why I called it "Vanilla". Along with the tutorials and guide, I am trying to use this to learn more about Meteor. — Dylan Nirvana, Nov 08 '18 at 22:29

Pass event object into template using Meteor

1 Answers1