My Meteor app isn't returning data from the server via Pub Sub

Question

I've completed the basic leaderboard app and read further documentation and finally decided to make my own app using this tutorial as a guide: http://meteorcapture.com/publishing-data-from-an-external-api/

my current code seems to work up until the point of passing data back to the client. I can't seem to get data from the server. Even though I have my subscribe and publish all set up.

I've cut down and simplified my code but to reduce points of error:

MyMp = new Mongo.Collection('mymp');

if (Meteor.isClient) {
  Session.setDefault('searching', false);

  Tracker.autorun(function(){
    if(Session.get('postcode')){
      var twfyHandle = Meteor.subscribe('twfySearch', Session.get('postcode'));
      Session.set('searching', ! twfyHandle.ready());
    }
  });

  Template.searchForm.events({
    'submit form': function(event, template) {
      event.preventDefault();
      var postcode = template.$('input[type=text]').val();

      if (postcode) {
        Session.set('postcode', postcode);
      }
    }
  });

  Template.body.helpers({
    mymp: function() {
      return MyMp.find();
    },
    searching: function() {
      return Session.get('searching');
    }
  });
}

if (Meteor.isServer) {
  Meteor.publish('twfySearch', function(postcode){

    console.log(postcode); // this received ok
    var self = this;

    var mp = {first_name: 'Test Name', party: 'Labour'}

    self.added('mymp', Random.id(), mp);
    self.ready();
  });
}

Templates in my HTML file:

<body>
    <h1>Get Details on your MP and Constituency</h1>
    <h2>Enter your post code below</h2>

    {{> searchForm }}

    {{#if searching }}
        <p>Searching...</p>
    {{else}}
    <div class="">
    {{> twfyResults }}
    </div>
    {{/if}}
</body>

<template name="twfyResults">
    {{ mp.first_name }}
</template>

<template name="searchForm">
<form>
    <input type="text" name="postcode" id="postcode" />
    <input type="submit" value="Search" />
</form>
</template>

I'm passing a postcode to the server and the server populates a basic JSON object 'mp' under a publish method and makes it ready().

This is where it fails. Although my console.log() calls show that the server is getting the postcode fine and creating the mp object. The client is not getting anything back!

UPDATE: I have managed to manually run in the browser console MyMp.findOne() and it returns the object the server created. However, this object seems inaccesible to my template. Also the 'mp' object itself doesnt exist.

Answer 1

I've realised THREE errors in my code.

I assumed the template object used to access the data sent back had the same name on the frontend as it did in the server (mp). Instead I should have been trying to access the helper name "mymp".

This was fixed by changing the twfyResults template to reference the helper method:

<template name="twfyResults">
    {{ mymp.first_name }}
</template>

My helper for the twfyResults was in the wrong context. So I rewrote my helpers like so:

Template.body.helpers({

    searching: function() {
        console.log(this);
        return Session.get('searching');
    }
});

Template.twfyResults.helpers({
    mymp: function() {
        return MyMp.findOne();
    }
});

But the above alone wasn't enough. I also had to change the "mymp" helper to return just one result as in this case only one result would ever be returned. That way I could access my objects variables in the above way. So my helper was changed to findOne() instead of just find as seen above.

My Meteor app isn't returning data from the server via Pub Sub

Question

1 answers

solution1
0 ACCPTED 2015-05-16 13:06:21

My Meteor app isn't returning data from the server via Pub Sub

Question

1 answers

solution1 0 ACCPTED 2015-05-16 13:06:21

solution1
0 ACCPTED 2015-05-16 13:06:21