I have an empty todo list:
<ul class="list">
</ul>
I want to create a li inside that list for each json title I have in the following json data:
[{"id":2,"title":"Mandar cartas a 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 a 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, I have the following javascript which uses handlebars for 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 a li in my html for each title in the json.
What am I missing?
Thanks!
When you iterate for each object of the array received in the JSON, you have to use this instead of data to access to the object.
data is the whole array and this is the current object where you want to retrieve the title property:
$.each(data, function() {
var context = this;
var show = template(context);
$(".list").append(show);
});
And also change the html method for append for don't overwrite the content.
Regards
I'm using Handlebars to display some datas via ajax, and the JSON is like this:
{"data":[
{ "sn":"43","areasn":"3","name":"X1","status":"empty","seats":"12"},
{ "sn":"22","areasn":"1","name":"F1","status":"empty","seats":"8"},
{ "sn":"12","areasn":"2","name":"E1","status":"empty","seats":"6"},
{ "sn":"18","areasn":"3","name":"R3","status":"empty","seats":"6"},
{ "sn":"31","areasn":"1","name":"G4","status":"empty","seats":"4"},
{ "sn":"23","areasn":"2","name":"W5","status":"empty","seats":"12"}
]}
and I need to use handlebars.js in order to display tables in differents areas, something like these:
<script id="tables-template" type="text/x-handlebars-template">
{{#each data}}
// All tables in area-1
<ul id="area-{{areasn}}">
<li id="{{sn}}">{{name}}</li>
</ul>
// All tables in area-2
<ul id="area-{{areasn}}">
<li id="{{sn}}">{{name}}</li>
</ul>
// All tables in area-3
<ul id="area-{{areasn}}">
<li id="{{sn}}">{{name}}</li>
</ul>
{{/each}}
</script>
I have no idea how to write a helper for this, is anyone can help? thanks!
There is probably a better way of doing this as I don't know about handlebars, but this should do what you are looking for:
(function() {
var id = 0,
cache = [];
var ids={};
Handlebars.registerHelper("groupData", function(data) {
var dataKey = id++;
ids[data.areasn]=true;
if(cache[data.areasn]==undefined) cache[data.areasn]={id:data.areasn, data:[data]};
else cache[data.areasn].data.push(data)
if(dataKey==context.data.length-1){
context.cache=[];
for(var i in ids){
context.cache.push(cache[i])
}
}
});
})();
var context={"data":[
{ "sn":"43","areasn":"3","name":"X1","status":"empty","seats":"12"},
{ "sn":"22","areasn":"1","name":"F1","status":"empty","seats":"8"},
{ "sn":"12","areasn":"2","name":"E1","status":"empty","seats":"6"},
{ "sn":"18","areasn":"3","name":"R3","status":"empty","seats":"6"},
{ "sn":"31","areasn":"1","name":"G4","status":"empty","seats":"4"},
{ "sn":"23","areasn":"2","name":"W5","status":"empty","seats":"12"}
]}
var template = Handlebars.compile($("#your-template").text());
var html = template(context);
document.body.innerHTML=html;
Check fiddle for html:
http://jsfiddle.net/mE49M/226/
I have the below JSON data that is present in the source of our product detail pages (this is an ecommerce site).
I need to pull the "atrsell" value from each line using javascript/jquery.
Can somebody give me the bext way to do this please?
<script type="text/javascript">
$(document).ready(function(){
Attributes.StoreJSON({"att1":"Cobalt","att3":"","att2":"6","att4":""},{"atronhand":24,"atrreleaseyr":"1970","atrmsrp":"0.00","atrlbl3":null,"atr2":"6","atrsku":"505274940925","atr3":"","atrlbl4":null,"atrwas":"68.00","atr4":"","atrbarcode":"","atrsell":"30.00","atrlbl2":null,"atrsuplsku":"","atrreleasemn":"01","atretayr":"0001","invtuuid":"D72DCC08-A550-11E3-B4DF-EAD3DD919408","atrreleasedy":"01","atretady":"01","atr1":"Cobalt","atrdssku":"","atrmpncode":"","atretamn":"01","atrpublish":"1","atrcost":"0.00","atrlbl1":null});
Attributes.StoreJSON({"att1":"Cobalt","att3":"","att2":"8","att4":""},{"atronhand":3430,"atrreleaseyr":"1970","atrmsrp":"0.00","atrlbl3":null,"atr2":"8","atrsku":"505274940926","atr3":"","atrlbl4":null,"atrwas":"68.00","atr4":"","atrbarcode":"","atrsell":"30.00","atrlbl2":null,"atrsuplsku":"","atrreleasemn":"01","atretayr":"0001","invtuuid":"D72DCC08-A550-11E3-B4DF-EAD3DD919408","atrreleasedy":"01","atretady":"01","atr1":"Cobalt","atrdssku":"","atrmpncode":"","atretamn":"01","atrpublish":"1","atrcost":"0.00","atrlbl1":null});
Attributes.StoreJSON({"att1":"Cobalt","att3":"","att2":"14","att4":""},{"atronhand":50,"atrreleaseyr":"1970","atrmsrp":"0.00","atrlbl3":null,"atr2":"14","atrsku":"505274940922","atr3":"","atrlbl4":null,"atrwas":"68.00","atr4":"","atrbarcode":"","atrsell":"30.00","atrlbl2":null,"atrsuplsku":"","atrreleasemn":"01","atretayr":"0001","invtuuid":"D72DCC08-A550-11E3-B4DF-EAD3DD919408","atrreleasedy":"01","atretady":"01","atr1":"Cobalt","atrdssku":"","atrmpncode":"","atretamn":"01","atrpublish":"1","atrcost":"0.00","atrlbl1":null});
Attributes.StoreJSON({"att1":"Emerald","att3":"","att2":"12","att4":""},{"atronhand":3,"atrreleaseyr":"1970","atrmsrp":"0.00","atrlbl3":null,"atr2":"12","atrsku":"505274940942","atr3":"","atrlbl4":null,"atrwas":"68.00","atr4":"","atrbarcode":"","atrsell":"42.00","atrlbl2":null,"atrsuplsku":"","atrreleasemn":"01","atretayr":"0001","invtuuid":"D72DCC08-A550-11E3-B4DF-EAD3DD919408","atrreleasedy":"01","atretady":"01","atr1":"Emerald","atrdssku":"","atrmpncode":"","atretamn":"01","atrpublish":"1","atrcost":"0.00","atrlbl1":null});
Attributes.StoreJSON({"att1":"Emerald","att3":"","att2":"14","att4":""},{"atronhand":1,"atrreleaseyr":"1970","atrmsrp":"0.00","atrlbl3":null,"atr2":"14","atrsku":"505274940943","atr3":"","atrlbl4":null,"atrwas":"68.00","atr4":"","atrbarcode":"","atrsell":"42.00","atrlbl2":null,"atrsuplsku":"","atrreleasemn":"01","atretayr":"0001","invtuuid":"D72DCC08-A550-11E3-B4DF-EAD3DD919408","atrreleasedy":"01","atretady":"01","atr1":"Emerald","atrdssku":"","atrmpncode":"","atretamn":"01","atrpublish":"1","atrcost":"0.00","atrlbl1":null});
Attributes.StoreJSON({"att1":"Emerald","att3":"","att2":"16","att4":""},{"atronhand":322,"atrreleaseyr":"1970","atrmsrp":"0.00","atrlbl3":null,"atr2":"16","atrsku":"505274940944","atr3":"","atrlbl4":null,"atrwas":"68.00","atr4":"","atrbarcode":"","atrsell":"42.00","atrlbl2":null,"atrsuplsku":"","atrreleasemn":"01","atretayr":"0001","invtuuid":"D72DCC08-A550-11E3-B4DF-EAD3DD919408","atrreleasedy":"01","atretady":"01","atr1":"Emerald","atrdssku":"","atrmpncode":"","atretamn":"01","atrpublish":"1","atrcost":"0.00","atrlbl1":null});
Attributes.StoreJSON({"att1":"Emerald","att3":"","att2":"18","att4":""},{"atronhand":200,"atrreleaseyr":"1970","atrmsrp":"0.00","atrlbl3":null,"atr2":"18","atrsku":"505274940945","atr3":"","atrlbl4":null,"atrwas":"68.00","atr4":"","atrbarcode":"","atrsell":"42.00","atrlbl2":null,"atrsuplsku":"","atrreleasemn":"01","atretayr":"0001","invtuuid":"D72DCC08-A550-11E3-B4DF-EAD3DD919408","atrreleasedy":"01","atretady":"01","atr1":"Emerald","atrdssku":"","atrmpncode":"","atretamn":"01","atrpublish":"1","atrcost":"0.00","atrlbl1":null});
Attributes.StoreJSON({"att1":"Navy","att3":"","att2":"10","att4":""},{"atronhand":431,"atrreleaseyr":"1970","atrmsrp":"0.00","atrlbl3":null,"atr2":"10","atrsku":"505274940927","atr3":"","atrlbl4":null,"atrwas":"68.00","atr4":"","atrbarcode":"","atrsell":"10.00","atrlbl2":null,"atrsuplsku":"","atrreleasemn":"01","atretayr":"0001","invtuuid":"D72DCC08-A550-11E3-B4DF-EAD3DD919408","atrreleasedy":"01","atretady":"01","atr1":"Navy","atrdssku":"","atrmpncode":"","atretamn":"01","atrpublish":"1","atrcost":"0.00","atrlbl1":null});
Attributes.StoreJSON({"att1":"Phantom","att3":"","att2":"10","att4":""},{"atronhand":3443,"atrreleaseyr":"1970","atrmsrp":"0.00","atrlbl3":null,"atr2":"10","atrsku":"505274940913","atr3":"","atrlbl4":null,"atrwas":"68.00","atr4":"","atrbarcode":"","atrsell":"20.00","atrlbl2":null,"atrsuplsku":"","atrreleasemn":"01","atretayr":"0001","invtuuid":"D72DCC08-A550-11E3-B4DF-EAD3DD919408","atrreleasedy":"01","atretady":"01","atr1":"Phantom","atrdssku":"","atrmpncode":"","atretamn":"01","atrpublish":"1","atrcost":"0.00","atrlbl1":null});
Attributes.StoreJSON({"att1":"Phantom","att3":"","att2":"12","att4":""},{"atronhand":99,"atrreleaseyr":"1970","atrmsrp":"0.00","atrlbl3":null,"atr2":"12","atrsku":"505274940914","atr3":"","atrlbl4":null,"atrwas":"68.00","atr4":"","atrbarcode":"","atrsell":"20.00","atrlbl2":null,"atrsuplsku":"","atrreleasemn":"01","atretayr":"0001","invtuuid":"D72DCC08-A550-11E3-B4DF-EAD3DD919408","atrreleasedy":"01","atretady":"01","atr1":"Phantom","atrdssku":"","atrmpncode":"","atretamn":"01","atrpublish":"1","atrcost":"0.00","atrlbl1":null});
Attributes.StoreJSON({"att1":"Sweet Grape","att3":"","att2":"16","att4":""},{"atronhand":433,"atrreleaseyr":"1970","atrmsrp":"0.00","atrlbl3":null,"atr2":"16","atrsku":"505274944584","atr3":"","atrlbl4":null,"atrwas":"68.00","atr4":"","atrbarcode":"","atrsell":"68.00","atrlbl2":null,"atrsuplsku":"","atrreleasemn":"01","atretayr":"0001","invtuuid":"D72DCC08-A550-11E3-B4DF-EAD3DD919408","atrreleasedy":"01","atretady":"01","atr1":"Sweet Grape","atrdssku":"","atrmpncode":"","atretamn":"01","atrpublish":"1","atrcost":"0.00","atrlbl1":null});
Attributes.StoreJSON({"att1":"Sweet Grape","att3":"","att2":"18","att4":""},{"atronhand":20,"atrreleaseyr":"1970","atrmsrp":"0.00","atrlbl3":null,"atr2":"18","atrsku":"505274944585","atr3":"","atrlbl4":null,"atrwas":"68.00","atr4":"","atrbarcode":"","atrsell":"68.00","atrlbl2":null,"atrsuplsku":"","atrreleasemn":"01","atretayr":"0001","invtuuid":"D72DCC08-A550-11E3-B4DF-EAD3DD919408","atrreleasedy":"01","atretady":"01","atr1":"Sweet Grape","atrdssku":"","atrmpncode":"","atretamn":"01","atrpublish":"1","atrcost":"0.00","atrlbl1":null});
});
</script>
Try
var arr = [],
Attributes = {
StoreJSON: function(obj1, obj2) {
arr.push(obj2);
}
};
/* Your code here*/
var atrsells = arr.map(function(i){
return i.atrsell;
});