6

I am using this data here: http://pastie.org/3231052 - How can I display the key instead of the value using Mustache or Handlebars?

[{"interval":"2012-01-21",
  "advertiser":"Advertisers 1",
  "offer":"Life Insurance",
  "cost_type":"CPA",
  "revenue_type":"CPA",
  ... etc ...
}]
Dave Newton
  • 152,765
  • 23
  • 240
  • 286
Coughlin
  • 5,905
  • 19
  • 61
  • 84
  • Do you mean you want to loop over each item and display key-value pairs? – Michael Mior Jan 22 '12 at 15:08
  • Yeah, so the key will be in for X amount of them. Then the value in the regardless of how many rows there are. Been struggling. Using jQuery throughout – Coughlin Jan 22 '12 at 15:32
  • In newer versions of Handlebars this is handled by default: http://stackoverflow.com/questions/11884960/how-to-get-index-in-handlebars-each-helper – user909410 May 13 '13 at 14:49

2 Answers2

1

If you want to display key-value pairs, you can write a helper in Handlebars.

Handlebars.registerHelper('eachkeys', function(context, options) {
  var fn = options.fn, inverse = options.inverse;
  var ret = "";

  var empty = true;
  for (key in context) { empty = false; break; }

  if (!empty) {
    for (key in context) {
        ret = ret + fn({ 'key': key, 'value': context[key]});
    }
  } else {
    ret = inverse(this);
  }
  return ret;
});

$(function() {
    var data = {"interval":"2012-01-21",
      "advertiser":"Advertisers 1",
      "offer":"Life Insurance",
      "cost_type":"CPA",
      "revenue_type":"CPA"};
                
    var source   = $("#template").html();
    var template = Handlebars.compile(source);
    $('#content').html(template({'data': data}));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0.beta2/handlebars.min.js"></script>
<script id="template" type="text/x-handlebars-template">
    {{#eachkeys data}}
    <li>{{this.key}} - {{this.value}}</li>
    {{/eachkeys}}
</script>
<div id="content">
</div>

EDIT

Seems like this isn't quite what you want, but it's possible to come up with a helper that will do the trick.

Michael Mior
  • 26,133
  • 8
  • 80
  • 110
  • I think very similar to that where they key is in the key here for x amount of them returned in the string? Does that work? – Coughlin Jan 22 '12 at 15:36
  • Then the value in the in the appropriate column based on the key – Coughlin Jan 22 '12 at 15:36
  • It would help to see an example of the HTML to you want to produce from the data. Is the data an array of objects? (It's unclear, since there's only one array element given.) If that's the case, you can simply loop over the array keys in the first element to produce the headers and then (assuming the columns are uniform throughout the data), populate the rows for each item. – Michael Mior Jan 22 '12 at 18:21
  • I think I was able to get it. But what you wrote was the base idea. The back end dev was able to tweak the output of the data. – Coughlin Jan 23 '12 at 13:28
0

I modified the previous response using Handlebars to handle objects key value pair. It is as simple as just doing the following:

<script id="template" type="text/x-handlebars-template">
    {{@entries}}
    <li>{{KEY}} - {{VALUE}}</li>
    {{/entries}}
</script>
<div id="content">
</div>

I put an example on Fiddle, hope it helps someone out there. Please note this implementation depends on Handlebars

Mustache Attribute addition.

lac_dev
  • 1,111
  • 12
  • 18