javascript - How to create html list from a json file (handlebars) -


i have empty todo list:

<ul class="list">  </ul> 

i want create li inside list each json title have in following json data:

[{"id":2,"title":"mandar cartas impresión","description":"","status":false,"priority":1,"created_at":"2015-12-07t13:09:55.552z","updated_at":"2015-12-07t13:09:55.552z","project_id":1},{"id":3,"title":"cif intracomunitario","description":"","status":false,"priority":1,"created_at":"2015-12-07t13:10:05.736z","updated_at":"2015-12-07t13:10:05.736z","project_id":1},{"id":4,"title":"uniformes chef porter","description":"","status":false,"priority":1,"created_at":"2015-12-07t13:10:16.170z","updated_at":"2015-12-07t13:10:16.170z","project_id":1},{"id":5,"title":"personal","description":"","status":false,"priority":1,"created_at":"2015-12-07t13:10:31.569z","updated_at":"2015-12-07t13:10:31.569z","project_id":1},{"id":1,"title":"mandar contrato pleni","description":"","status":false,"priority":1,"created_at":"2015-12-07t13:09:36.747z","updated_at":"2015-12-07t13:13:12.068z","project_id":1},{"id":17,"title":"comprar tpv","description":"","status":false,"priority":null,"created_at":"2015-12-08t00:18:40.753z","updated_at":"2015-12-08t00:18:40.753z","project_id":1},{"id":18,"title":"vajillas zara home","description":"","status":false,"priority":null,"created_at":"2015-12-08t00:18:54.580z","updated_at":"2015-12-08t00:18:54.580z","project_id":1},{"id":19,"title":"tpv","description":"","status":false,"priority":null,"created_at":"2015-12-08t00:33:17.393z","updated_at":"2015-12-08t00:33:17.393z","project_id":1},{"id":21,"title":"wifi - contratar","description":"","status":false,"priority":null,"created_at":"2015-12-08t15:33:24.639z","updated_at":"2015-12-08t15:33:24.639z","project_id":1},{"id":22,"title":"cuenta definitiva santander","description":"","status":false,"priority":null,"created_at":"2015-12-08t15:33:50.255z","updated_at":"2015-12-08t15:33:50.255z","project_id":1},{"id":23,"title":"pagarés kider","description":"","status":false,"priority":null,"created_at":"2015-12-08t15:34:08.162z","updated_at":"2015-12-08t15:34:08.162z","project_id":1}] 

so, have following javascript uses handlebars templating:

 <script>         jquery.getjson("http://myurl/tasks.json", function(data){       var source   = $("#tasks-template").html();     var template = handlebars.compile(source);       $.each(data) function() {          var context = data;          var show    = template(context);         $(".list").html(show);       });     });              </script> 

my handlebars template:

  <script id="tasks-template" type="text/x-handlebars-template">     <li>         <div>{{title}}</div>     </li>   </script> 

it wont create li in html each title in json.

what missing?

thanks!

when iterate each object of array received in json, have use this instead of data access object. data whole array , this current object want retrieve title property:

$.each(data, function() {      var context = this;      var show    = template(context);     $(".list").append(show);   }); 

and change html method append don't overwrite content.

regards


Comments

Popular posts from this blog

get url and add instance to a model with prefilled foreign key :django admin -

css - Make div keyboard-scrollable in jQuery Mobile? -

ruby on rails - Seeing duplicate requests handled with Unicorn -