CODEWITHSUNDEEP
meteorparse-platform
Trilok Pathak
Trilok Pathak

Reputation: 3101

Data is not displayed in the template

I am using Parse inside a Meteor application. Here is my code:

HTML:

<body>
    <div class="container">
        <header>
            <h1 style="color: red;">Meteor & Parse DB Demo</h1>
        </header>
        {{>header}}
    </div>
</body>

<template name="header">
{{#each alphabets}}
    <div class="alphabets">{{this}}</div>
{{/each}}

JS:

Parse.initialize("appid", "jsid");
var list_item=Parse.Object.extend("className");
var query=new Parse.Query(list_item);
var list=[];

if (Meteor.isClient) {
  query.find({
    success:function(o){
      for (var i = 0; i < o.length; i++) {
        var object = o[i];
        list.push(object.get('name'));
        console.log(list);
      }
      return list;
    },
    error: function(error) {
      alert("Error: " + error.code + " " + error.message);
    }

  });
  Template.header.alphabets = function() {
    return list;
  };
}
</template>

The data is coming from the database, but the problem is that the template is loaded before the data arrives:

template.headed.alphabet is called before query.find is is called

Upvotes: 2

Views: 83

Answers (2)

Trilok Pathak
Trilok Pathak

Reputation: 3101

Here is the code which worked for me i am posting this so other can refer it.

HTML:

<body>
<div class="container">
    <header>
        <h1 style="color: red;">Meteor & Parse DB Demo</h1>
    </header>
    {{>header}}
</div>
</body>

<template name="header">
{{#each alphabets}}
    <div class="alphabets">{{this.name}}</div>
{{/each}}

JS:

Parse.initialize("appid", "jsid");
var list_item=Parse.Object.extend("className");
var query=new Parse.Query(list_item);
var list=[];

if (Meteor.isClient) {
  query.find({
    success:function(o){
      for (var i = 0; i < o.length; i++) {
        var object = o[i];
        list.push({name:object.get('name')});
        console.log(list);
      }
      return list;
    },
    error: function(error) {
      alert("Error: " + error.code + " " + error.message);
    }

  });
  Template.header.alphabets = function() {
    return list;
  };
}
</template>

Upvotes: 1

Keith Nicholas
Keith Nicholas

Reputation: 44288

Make your list a client side collection, it will then be reactive and update

list = new Mongo.Collection(null);

then do list.insert(object.get('name'))

Parse.initialize("appid", "jsid");
var list_item=Parse.Object.extend("className");
var query=new Parse.Query(list_item);

if (Meteor.isClient) {
  list = new Mongo.Collection(null);
  query.find({
    success:function(o){
      for (var i = 0; i < o.length; i++) {
        var object = o[i];
        list.insert(object.get('name'));

      }

    },
    error: function(error) {
      alert("Error: " + error.code + " " + error.message);
    }

  });
  Template.header.helpers({
     alphabets : function() {
      return list.find({});
     }
  });
}
</template>

Upvotes: 2

Related Questions