Re-order object keys before loop Handlebars

Question

I have an object which on passing to Handlebars template, it iterates on default sort, but I want to sort in a particular way and not the default way. The way I tried this is like :-

Demo

<div id="some-stuff"></div>

<script id="some-template" type="text/x-handlebars-template">
  <ul>
    {{#test this}}{{/test}}
  </ul>
</script>

Helper

Handlebars.registerHelper('test', function(obj, options) {
  var sortIn = ['red', 'green', 'blue', 'yellow'];
  var rt = '';

  sortIn.forEach(function(entry) {
    for (var i = 0; i < obj[entry].length; i++) {
      rt += '<li><span>' + obj[entry][i] + '</span></li>';
    }
  });

  return rt;
});

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

var data = { // want output as red, green, blue and yellow
  'yellow': ['Yellow', 1, 2, 3, 4, 5],
  'green': ['Green', 1, 2, 3, 4, 5],
  'blue': ['Blue', 1, 2, 3, 4, 5],
  'red': ['Red', 1, 2, 3, 4, 5]
};

var html = template(data);
$("#some-stuff").html(html);

But for some reason, I am not happy with this, at the end, it's me who is looping and passing elements to the template. What can I do to loop this by default in the sortIn order without helper using #each.

Somewhat similar to this question - Sort object keys with Handlebars

To use `#each` and specify a particular order, you can restructure `data` into an Array of Objects before providing it to the template – `[ { color: 'red', data: ['Red', 1, ...] }, ...]`. — Jonathan Lonowski, May 05 '16 at 18:04
Possible duplicate of http://stackoverflow.com/questions/37056250/how-can-we-custom-sort-javascript-object-keys/ — guest271314, May 05 '16 at 18:06
@guest271314 how is it a duplicate? I am asking this question specific to handlebars... and the approach I am taking to generate the template. — Learner, May 05 '16 at 18:08
@JonathanLonowski So I need to restructure the object right? No other way to do so? — Learner, May 05 '16 at 18:11
@Learner _"it's me who is looping and passing elements to the template"_ See http://stackoverflow.com/questions/37056250/how-can-we-custom-sort-javascript-object-keys/#comment61659925_37056250 _"And then again, if it's your code that iterates over the Map, you might as well iterate over the key array and simply access the object properties in that order."_ See OP at http://stackoverflow.com/questions/37056250/how-can-we-custom-sort-javascript-object-keys/ _"And I have an array with values of : var arr = ['red', 'green', 'blue', 'yellow'];"_ , _"// want output as red, green, blue and yellow"_ — guest271314, May 05 '16 at 18:11

score 0 · Answer 1 · answered May 05 '16 at 18:31

In your case, I would consider converting your data into an array of objects that contain your values and pass that to the template:

var data = [
  { color: 'Yellow', seq: [1,2,3,4,5] },
  { color: 'Red', seq: [6,7,8,9,10] },
  // ...
];

You can sort that array before handing it over to the template by providing a custom .sort() function which compares two elements' color properties.

Re-order object keys before loop Handlebars

1 Answers1