CODEWITHSUNDEEP
javaformstemplatesmeteordynamic
Benjamin Bohec
Benjamin Bohec

Reputation: 203

Meteor dynamic templates from http call and form

I'm currently recovering JSON formated from HTTP CALL. This function is launched with parameters provided by a form template and parameters are pushed on variables with submit event.

My function getusershttp is able to return some results that I'm able to see with console.log(results.content);:

"results" : [
      {
         "name" : {
            "first" : "Billy",
            "last" : "McKornic"
         },
         "id" : "a1c3fd06c71ccc50998baa02074976b4d639e4cf",
         "situation" : "free",
      },
      {
         "name" : {
            "first" : "Dough",
            "last" : "Wallas"
         },
         "id" : "5694c02beaf20d2d4b5747668b82264af8547e33",
         "situation" : "occuped",
      }
   ],
   "status" : "OK"
}

I would like to put each result in my articles template with:

<template name="articles">
    {{#each results}}
        <header>
            <p>{{name.first}} {{name.last}}</p>
            <p>{{id}}</p>
            <p>{{situation}}</p>
        </header>
    {{/each}}
</template>

What template event and function I must create in order to provide each results data? Currently I have:

Template.articles.helpers({
    results : function() {
      return Meteor.call("getusershttp",FormParamX,FormParamY);   
    }
  });

But I have a java error on page loading since my form is not submited and FormParamX and FormParamY are not populated. How do I force my Template (event & function) to wait my form submited in order to start providing results?

Thanks!

Upvotes: 0

Views: 40

Answers (2)

Benjamin Bohec
Benjamin Bohec

Reputation: 203

After Stephen tips I took a look with session variables and it works!

In order to help, I provide the solution according my exemple.

First, my form template event function:

Template.search.events({
  'submit form':function (event){
    event.preventDefault();
    var FormParamX = event.target.FormParamX.value;
    var FormParamY = event.target.FormParamY.value;

    Meteor.call("getusershttp",FormParamX,FormParamY,function(error, results) {
      Session.set("MyUsers",results.content);
    });
  }
});

Here, my session variable MyUsers store my HTTP CALL JSON output.

Then, my articles template helpers:

Template.articles.helpers({
  results : function() {
    if (Session.get("MyUsers")) {
      console.log(JSON.parse(Session.get("MyUsers")).results);
      return JSON.parse(Session.get("MyUsers")).results;
    };
  }
});

Helpers only provide session variable MySearch value if it have some values. I tested changing my form and on each submit, helpers provide different values as expected.

My template articles is not able now to provide each results but this is another issue.

Update: In order to provide each results value, I need to parse my JSON output. I updated the code and now my template is working.

Another time, thanks Stephen!

Upvotes: 0

Stephen Woods
Stephen Woods

Reputation: 4049

Set the values for FormParamX and Y to reactive variables, then you can simply do:

results() {
    if( Template.instance().FormParamX.get() && Template.instance().FormParamY.get() ) {
        return Meteor.call("getusershttp",FormParamX,FormParamY);   
    }
}

Then any time the form parameters change, you'll recall your Meteor method and get the appropriate data.

Additional documentation on reactive variables are here, and there is also a nice walkthrough on TheMeteorChef.

Upvotes: 1

Related Questions