Question

I’m using handlebars js to iterate over json data object. But handlebars throws an exception saying “depth0” is undefined.

Am i doing the generation in a proper way ?

HTML

<div class="eventlist">                                 
  <ul>                                      
    <script id="event_template" type="text/x-handlebars-template">                          
      <li>{{name}}</li>                             
  </script>                                     
</ul>                               
</div>

JS

generateEventList = function(){
    var el_tmpl = Handlebars.compile($('#event_template').html());
    $.getJSON('json/events.json' , function(k,v) {
        $('.event-list ul').append(el_tmpl(v.eventList));
    });
};

JSON

{ 
 "event": [ 
  { 
     "month": "august", 
     "eventList": { 
        "name": "Event1",
        "name": "Event1",
        "name": "Event2",
        "name": "Event3",
        "name": "Event4",
        "name": "Event5",
        "name": "Event6"
     }, 
     "list": [ 
        { 
           "name": "Comment", 
           "link": "http://www.facebook.com/X999/posts/Y999"
        }, 
        { 
           "name": "Like", 
           "link": "http://www.facebook.com/X999/posts/Y999"
        } 
     ], 
     "type": "status", 
     "created_time": "2010-08-02T21:27:44+0000", 
     "updated_time": "2010-08-02T21:27:44+0000"
  }
 ] 
}

Answer 1

I think you’re a little confused about what the $.getJSON success handler gets as its arguments: the first argument is the entire JSON response and the second is the text status.

You want to use $.each to iterate over eventList with something like this:

$.getJSON('json/events.json' , function(data) {
    var $ul = $('.event-list ul');
    $.each(data.event[0].eventList, function(k, v) {
        $ul.append(el_tmpl(v));
    });
});

So the k,v function goes on the $.each, not the $.getJSON and you need to dig into data properly.

You might want list instead of eventList, hard to say without more context.