How can I get data from a .json file in Handlebars.js without using {{#each}} or {{#if}}?

Question

I've been using {{#each}} and {{#if}} in handlebars.js to grab data from JSON files. But I need a way to get the data without any conditions. I have no need for an {{#if}} statement and there's only one set of data so I don't need {{#each}} either. Is there a way to do this? {{#each}} works but I don't want to be using that if there's a simpler method to get a single block of data.

I should note that I'm using Grunt with Handlebars and that my document calls from more than just one JSON file.

Here is my code.

  {{data.PaymentMethod}}
  <table>
  <tr>
    <td>
      <div>Payment Method</div>
      <div>Card Number: {{CardNumber}}</div>
      <div>Card Colder: {{CardHolder}}</div>
      <div><a href="{{Link}}">Tracking</a></div>
    </td>
  </tr>
  </table>

And this is my JSON file (data.json).

{
"PaymentMethod": [
        {
            "CardNumber": "****",
            "CardHolder": "John Doe",
            "Link": "http://www.test.com"
        }
    ]
}

How do you call your template?

76484
– 76484

2016-08-04 00:59:13 +00:00
Commented Aug 4, 2016 at 0:59 — 76484
– 76484, Commented Aug 4, 2016 at 0:59

Craicerjack · Accepted Answer · 2016-08-03 21:56:34Z

1

<div>Card Number: {{data.PaymentMethod.0.CardNumber}}</div>
<div>Card Colder: {{data.PaymentMethod.[0].CardHolder}}</div>

You should be able to access it like so. Because data.PaymentMethod is an array you have to access the first object in that array.

edited Aug 3, 2016 at 21:56

answered Aug 3, 2016 at 21:44

Craicerjack

6,3303 gold badges34 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

jkupczak Over a year ago

Must be missing something as this did not work for me. I'm running Grunt and I got this in my cmd window: Expecting 'ID', got 'INVALID'

Craicerjack Over a year ago

ah i was missing out on the . before the array value. the brackets are optional in this case but not if you are using the with helper

jkupczak Over a year ago

The new code no longer throws any errors, but it's not pulling any data in either. :( I've confirmed the filename is right as is the contents of the JSON file. The with helper works for me, but not this. I imagine if I could get your answer to work then that would be ideal because it's less code.

Craicerjack Over a year ago

does the with helper work with or without the data part? If it works without have you tried removing the data. from the above code?

jkupczak Over a year ago

{{#with data.PaymentMethod.[0]}} doesn't work but {{#with PaymentMethod.[0]}} does.

|

shmosel · Accepted Answer · 2016-08-03 21:45:07Z

1

You can use the #with helper to step into the array:

{{#with PaymentMethod.[0]}}
    <div>Payment Method</div>
    <div>Card Number: {{CardNumber}}</div>
    <div>Card Colder: {{CardHolder}}</div>
    <div><a href="{{Link}}">Tracking</a></div>
{{/with}}

answered Aug 3, 2016 at 21:45

shmosel

51k7 gold badges81 silver badges148 bronze badges

3 Comments

jkupczak Over a year ago

I've got multiple JSON files. I noticed your code doesn't specifiy the data.json file. Should there be something in there to make sure it doesn't pull from the wrong JSON file if the PaymentMethod exists elsewhere?

shmosel Over a year ago

@jimmykup I'm not sure what you mean. What does the data file have to do with the template?

jkupczak Over a year ago

What I mean is that somewhere else in my document I might pull from data2.json. data.json and data2.json might both have PaymentMethod in them (with different data). Your code doesn't explicitly specify to look inside data.json. Would it be best/possible to do that?

Collectives™ on Stack Overflow

How can I get data from a .json file in Handlebars.js without using {{#each}} or {{#if}}?

2 Answers 2

6 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related