Handlebars - inline decode context and fill the template

Question

I have a json which contains JSON but encoded. Data field in container 2 is a string. I want to use this data and other fields in the JSON to populate the template.

var data = {
      "containers": [
        {
          "containerId": 1,
          "containerLabel": "1",
          "dataType": "URL",
          "data": "http://www.google1.com",
          "dataEncoding": null,
          "startDTS": "2019-04-03T10:41:04.570Z",
          "endDTS": "2025-01-01T18:29:59.999Z",
          "containerAnalyticsData": {
            "variationId": "563601179",
            "actionBlockId": "29408_563601179ActionBlock_0",
            "campaignId": 29408,
            "containerId": "1",
            "controlGroupId": "23517",
            "treatmentId": "8f3b53a9-1a7e-4fbe-b28f-450fa88ab474"
          }
        },
        {
          "containerId": 2,
          "containerLabel": "2",
          "dataType": "application/json",
                  "data": "{\"cardType\":\"123Stock\",\"cardTypeID\":5,\"cardID\":\"/content/help/en/ccx/v1/stock/width/2/stock-search\",\"cardName\":\"123 Stock\",\"displayTemplate\":\"123Stock\",\"width\":2,\"backgroundImage\":\"https://helpx.123.com/content/dam/help/en/ccx/stock/stock-june2017-2w-730x280.jpg\",\"backgroundFillColor\":\"\",\"invertPresentation\":false,\"overlayTintColor\":\"\",\"overlayTintPercentage\":0.0,\"priority\":1,\"cardLabel\":\"GET TEN FREE IMAGES FROM 123 STOCK\",\"displayText\":\"Get 10 free 123 Stock images.\",\"displayTextAlignment\":\"center\",\"bodyCopy\":\"\",\"bodyCopyAlignment\":\"left\",\"ctaLabel\":\"Go\",\"ctaAlignment\":\"right\",\"secondaryCTALabel\":\"\",\"secondaryCTAAlignment\":\"right\",\"actionURL\":\"https://stock.123.com/search?k=\",\"urlLinkType\":\"external\",\"defaultURL\":\"https://stock.123.com\",\"urlAppendAnalyticsParams\":true,\"urlApply123Authentication\":true,\"footnote\":\"\",\"searchLabel\":\"\"}",
          "dataEncoding": null,
          "startDTS": "2019-04-03T10:41:04.493Z",
          "endDTS": "2025-01-02T07:59:59.999Z",
          "containerAnalyticsData": {
            "variationId": "563597567",
            "actionBlockId": "28018_563597567ActionBlock_0",
            "campaignId": 28018,
            "containerId": "2",
            "controlGroupId": "",
            "treatmentId": "PR-91a1350b-1f86-46f4-8193-0e06fbc9412d"
          }
        }]
    };

Is there a way to decode this data inline and populate the template?

Here is the fiddle link which has the logic to populate the template: http://jsfiddle.net/agoyal/38goqau5/6/

EDIT:
The resulting object should have the inner data element in JSON instead of string.

I am almost there. I want to build my own object, but there is a small issue that i have to use data.data now instead of just data. How can i return the whole object by modifying the current context?
See this fiddle : jsfiddle.net/agoyal/0fwm768n/29

Answer 1

What you can do is to make a helper that parses you string to JSON.

Check out this fiddle

<div>
   {{data.cardID}}
</div>


Handlebars.registerHelper('eachJson', function(context, options) {
    let returnValue = ""

  $.each(context, function() {
    if (this.dataType === "application/json") {
      const json = JSON.parse(this.data)

      returnValue += options.fn({
        //Return the whole JSON
        data: json
      });      
    } else {
        returnValue += options.fn({
                data: this.data
      })
    }
  })

    return returnValue;

})

EDIT: