json data getting from url is not parsed in handlebars.js

Question

I want to parse JSON data that I am getting from url in handlebars. What I tried is I got the JSON data from the url. I defined it into data object. I want to know how can I parse the data using handlebars.js I am new to handlebars.js Is there any other way in which we can get without defining each property? Because my JSON data is huge. for eg.

reportData = {
        inquiryId= data.data[0].inquiryId;
}

HTML code:

<script id="address-template" type="text/x-handlebars-template">
  {{#with data}}
  <p> My id is  {{{inquiryId}}}</p>
  {{/with}}
</script>
<div class="content-placeholder"></div>

JS code:

var reportData= {};
    $(document).ready(function () {
        $.ajax({
            type:'GET',
            url: reportURL,
            success : function (data){
                var inquiryId= data.data[0].inquiryId;

                var theTemplateScript = $("#address-template").html();
                console.log(theTemplateScript);
                // Compile the template
                var theTemplate = Handlebars.compile(theTemplateScript);

               // Define our data object
                reportData=data;
                console.log(reportData);
                // Pass our data to the template
                var theCompiledHtml = theTemplate(reportData);

                // Add the compiled html to the page
                $('.content-placeholder').html(theCompiledHtml);
            }

        })
    });

JSON:

{  
   "success":true,
   "errors":{  

   },
   "authenticated":true,
   "program":1,
   "data":[  
      {  
         "id":1,
         "date":1505756267000,
         "name":"AKKAYA, JORGE",
         "productName":"Credit Profile",
         "inquiryId":726608
      }
   ]
}

My output is: My id is

Can anyone help me out? Thanks in advance.

Answer 1

In your Json, data contains array and in your html you are treating it like single object. So please use the below handlebar format to iterate over it.

{{#with abc}}
  {{#each this}}
    <p> My id is  {{{inquiryId}}}</p>
  {{/each}}
{{/with}}