Having trouble getting my data from parse.com to display in the meteor template


#1

A meteor newbie here. So I am pulling my data from parse.com and I would like to show it in the meteor template. The data is successfully pulled and when you do console.log you get the expected data in the console. but after i build the data into a javascript object and send it to the template it does not display. I am not sure what I am doing wrong

the route

Router.route('/', function () {
  Parse.initialize("app_id", "js_id")
  var Events = Parse.Object.extend("Events");
  var query = new Parse.Query("Events");

  this.layout('pEvent', {
    //set a data context for the whole layout
    data: function(){
      query.find({
      success: function(results) {
        eventArray = []
        eventObject = {}
        $(results).each(function(index){
          eventObject.id = this.id
          eventObject.name =  this.get("name")

          eventArray.push(eventObject)
          
        });
        console.log(eventArray)
        return eventArray
      },
      error: function(error) {
        console.log("Error: " + error.code + " " + error.message);
      }
    });
}});
this.render('pEvent');
});

This is the template

<head>
</head>

<body>
  <ul>
    {{#each data}}
      {{> pEvent}}
    {{/each}}
  </ul>
  <a href="/createEvent">event</a>
</body>

<template name="pEvent">
  <li>{{name}}</li>
</template>

Please any insight will be useful, thanks


#2

Iron Router automatically replaces everything in your <body> tag. Check out the documentation for Iron Router. You should put what you have in the body tag into its own template and define that template to be used with the / route.

I would start with that. Also, when configured right, you do not need to tell Iron Router to render, it does that automatically based on the configuration of the route.


#3

Ah that was helpful. I found my problem. I am making an asynchronous call to pare.com and I am trying to send the data I receive (in the call back) to the template. This is now working well. I am having scope problems because the code to send data to the template lives outside the callback.

Is there any helpers or library in meteor for using parse.com as a backend? One I saw is not compatible after meter 0.9 and the second (I dont think is really a library) is not documented at all.

I am trying to pull data from parse.com and send it to my templates

Any blog post or examples anyone is aware of will be helpful, thanks


#4

I am doing something similar myself, using Parse on the server side. I used the steps described in this post from meteorhacks.com to use npm modules in Meteor.

For the Parse API calls I ended up utilizing the node-parse-api module.

One caveat is that packages.json has to reference a tarball (as opposed to the version number) in order to work:

{
    "node-parse-api":"https://github.com/leveton/node-parse-api/tarball/0f71c34e2366a95102e736afc5c7792b85e1ddcb"
}

#5

Any luck with this ? I’m running into the same problem, I got parse-sdk to work, but I’m having trouble figuring out how to get the underlying async function in parse to return reactive data to the template


#6

No no luck here! I abandoned it


#7

In meteor, you should use methods to handle CUD (Create, Update, Delete) and publish/subscribe to get/show data. My solution to show data from external sources such as Parse, Firebase,… is create virtual collection in client and publish data from Parse to virtual collection.


// client 
    SubCache = new SubsManager();
    TodoCollection = new Mongo.Collection('todos');

    Template.hello.onCreated(function () {
        const instance = Template.instance();
        instance.props = new ReactiveDict();
        instance.props.set('limit', 10);
        instance.props.set('isLoading', false);

        instance.autorun(function() {
            instance.props.set('isLoading', true);
            let sub = SubCache.subscribe('todos', instance.props.get('limit'));
            if(sub.ready()) {
                instance.props.set('isLoading', false);
            }
        });
    });


// server
    Meteor.publish('todos', function (limit = 10) {
        const sub = this;
        const query = new Parse.Query(Todo);
        query.limit(limit + 1);
        query.find({
            success: function (results) {
                for (var i = 0; i < results.length; i++) {
                    var object = results[i];
                    sub.added('todos', object.id, object.attributes);
                }
                sub.ready();
            },
            error: function (error) {
                alert("Error: " + error.code + " " + error.message);
            }
        });
    });