Handlebars helper function to iterate through two objects simultaneously

Question

There are two objects in JSON I receive, objA & objB, each containing an array.

{
  "objA": {
    "arrayA": [
      {
        "varA": "1"
      },
      {
        "varA": "2"
      },
      {
        "varA": "3"
      },
      {
        "varA": "4"
      }
    ]
  },
  "objB": {
    "arrayB": [
      {
        "varB": "1"
      },
      {
        "varB": "2"
      },
      {
        "varB": "3"
      },
      {
        "varB": "4"
      }
    ]
  }
}

I need to write a Handlebars helper function to somehow iterate simultaneously through both objects and print something like this:

<p>1 - 1</p>
<p>2 - 2</p>
<p>3 - 3</p>
<p>4 - 4</p>

Rearranging the JSON is computationally heavy, and practically not under my control. Any idea how may I accomplish this?

score 0 · Answer 1 · edited May 23 '17 at 12:29

I would actually just iterate over the data before throwing it into Handlebars, like so if you are getting the object back like you show I would do something like this:

<script id="handlebartemplate" type="text/x-handlebars-template">
    {{#each finalData}}
        <p>{{this.varA}} - {{this.varB}}</p>
    {{/each}}
</script>

<script type="text/javascript">
    var returnedData = {
        "objA": {
            "arrayA": [
                {
                    "varA": "1"
                },
                {
                    "varA": "2"
                },
                {
                    "varA": "3"
                },
                {
                    "varA": "4"
                }
            ]
        },
        "objB": {
            "arrayB": [
                {
                    "varB": "1"
                },
                {
                    "varB": "2"
                },
                {
                    "varB": "3"
                },
                {
                    "varB": "4"
                }
            ]
        }
    };

    var finalData = [];
    $.each( returnedData.objA.arrayA, function(key,val){
        finalData.push({
            varA: val.varA,
            varB: returnedData.objB.arrayB[key].varB
        })
    })

    var source   = $("#handlebartemplate").html();
    var template = Handlebars.compile(source);
    var context = {finalData: finalData};
    var html    = template(context);

    document.write(html);
</script>

As you can see I have the template set up first just to show var A or var B, I set it up to just have your object, obviously you'd be retrieving that in whatever way you are currently doing.

Next I iterate over the object and create a new object that has the correct information all tied together.

You could alternatively use the index, or register a helper to get the associated data, there is something similar here: Handlebars array access with dynamic index

But my way makes it so you don't need to register a new helper and it looks a lot cleaner in the template.

Thanks for the effort, I've actually simplified the example a lot, objects are 120 kb in size both, so rearranging them from 'returnedData' to 'finalData' is something that I'm trying to avoid, and will do if there is no other way. — Ivan Todorovic, Nov 05 '15 at 17:56

Handlebars helper function to iterate through two objects simultaneously

1 Answers1