CODEWITHSUNDEEP
ember.jshandlebars.js
user1412777
user1412777

Reputation: 67

Unable to access nested JSON properties from handle bars template

js with HandleBar, I have been using it for a couple of days now but I have hit a problem.

Basically i have the following json data:

{
   "id":1009,
   "parent_id":1007,
   "template":"blog-post",
   "path":"/blog-post/another-test-blog-post/",
   "name":"another-test-blog-post",
   "created":1389310922,
   "modified":1389371901,
   "created_users_id":41,
   "modified_users_id":41,
   "title":"Another Test Blog Post",
   "headline":null,
   "summary":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis lectus dui. ",
   "image_caption":"Another Image Caption",
   "images":{
      "blog-sample-image-medium.png":{
         "basename":"blog-sample-image-medium.png",
         "description":"",
         "tags":"",
         "formatted":true,
         "modified":1389352919,
         "created":1389352919
      }
   },
   "sub_heading":"Another Sub Heading"
}

It is valid data and I am able to obtain parameters and display within my handle bars template. However I am unable to access the properties within "images", I have tried also sorts of techniques and am unable to do so. Here is the part of my template in question:

      {{#each item in model}}

        <div class="media-element" {{#ifIsNthItem nth=3}} style="margin-right: 0px;" {{/ifIsNthItem}}>

            <div style="skyiq-element-icon blog-element">
            </div>

            <div class="media-main-image grayscale" style="">




            </div>
            <p class="sub-heading">{{item.title}}</p>
            <ul>
              <li><a href="#"><i aria-hidden="true" class="skycon-user-profile"></i> By Liam Powell</a></li>
              <li><i aria-hidden="true" class=" skycon-info"></i> 02/Dec/2013</li>
            </ul>
            <p>{{{item.summary}}}</p>
            <a href="#blog" class="skyiq-read-more">read more</a>
            <div class="skyiq-line"></div>
            <a href="#" class="skyiq-share-link"><i class=" skycon-share" aria-hidden="true"></i> Share</a>
          </div> 
      {{/each}}

So parameters such as item.summary display but I can not display item.images.1.basename for example.

Any help or a point in the right direction would be a great help.

Thanks in advance

Upvotes: 1

Views: 1221

Answers (1)

Adam
Adam

Reputation: 3158

Three things:

1) The way you're accessing it like this: {{item.images.1.basename}} makes me think you want to treat images like an array. You can't access items in an array using the index number in handlebars like you would in javascript. Ember provides helper properties called firstObject and lastObject on arrays that let you access the first and last object of the array. But, there isn't a secondObject which it looks like you want in the case you laid out. Typically the way you would access elements in an array is by iterating over them using an {{#each}}.

2) In the JSON you posted, images isn't an array but an object. So, you would access items on it like this: {{item.images.blog-sample-image-medium.png.basename}}.

3) Ember is likely going to not like the fact that the object key blog-sample-image-medium.png has a period in it, since that's how it figures out when it's time to access the next object. You should try and figure out how to get the period out of the keys name.

Upvotes: 1

Related Questions