Pass API response data to Handlebars

Question

I am using the feathers js client locally to access a remote feathers server. I am using handlebars (foundation 6 Yeti setup) on the client.

This code will pass either an [Object, Object] (the original response) or a json string to the console.

pageService.get().then(function(pages) {
     var pageList = JSON.stringify(pages.data);
     console.log(pageList);
     var pageObj = JSON.parse(pageList);
     console.log(pageObj);

How can i get that into handlebars as a variable.

<h4>List Page SEO</h4>
{{ pageList }}

<div id="page-info">
    {{#each pageObj}}
    <h2>{{title}}</h2>
    <h2>{{slug}}</h2>
    <p>{{description}}</p>
    {{/each}}
</div>

I am not sure what you are trying to do? Using the client I don't see a reason to have to stringify or parse any JSON data. — Daff, Jun 09 '16 at 03:35
Thanks Daff for the reply and Feathers!! I'm not sure what I am trying to do either :~) Coming from Laravel and JS is still a bit of a mystery, Feathers is appealing due to the auth and realtime so was trying the docs http://docs.feathersjs.com/clients/rest.html under Browser Usage. Guess maybe I need an example of a get request that would pass the response to a variable Handlebars could use or I jest need to learn some JS to figure out how to break the data out of the object passed back from messageService.get. — BrioDev, Jun 11 '16 at 20:37

score 1 · Answer 1 · answered Jun 12 '16 at 17:36

A Handlebars template can be rendered with data from the server using the Feathers client like this:

<script type="text/javascript" src="socket.io/socket.io.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/core-js/2.1.4/core.min.js"></script>
<script type="text/javascript" src="//npmcdn.com/feathers-client@^1.0.0/dist/feathers.js"></script>

<script id="pages-template" type="text/x-handlebars-template">
  <h4>List Page SEO</h4>

  <div id="page-info">
    {{#each pages}}
      <h2>{{title}}</h2>
      <h2>{{slug}}</h2>
      <p>{{description}}</p>
    {{/each}}
  </div>
</script>

<script type="text/javascript">
  var socket = io();
  var app = feathers()
    .configure(feathers.hooks())
    .configure(feathers.socketio(socket));

  var source = $("#pages-template").html();
  var template = Handlebars.compile(source);

  app.service('pages').find().then(items => {
    console.log(template({
      pages: items.data
    }))
  });
</script>

Pass API response data to Handlebars

1 Answers1