I am just trying to display a list of items inside an Object I am pulling in with an AJAX call. I would like to display it with icanhaz.js template.
HTML:
<script id="trending" type="text/html">
<li>
<p>Name: {{ Trending.name }}</p>
</li>
</script>
<ul id="trending" class="span12">
<li>Trending</li>
</ul>
JS:
$(document).ready(function(){
$.ajax({
dataType : 'jsonp',
url : 'https://s3.amazonaws.com/sxsw_trending/sxsw_trending.json',
jsonp : "callback",
jsonpCallback: "sxswTrending",
success : function (data) {
console.log(data.Trending);
var trendingArr = [];
var trending;
trending = ich.trending(data);
$('#trending').append(trending);
for (var i = 0, len = data.length; i < len; i++) {
var trending;
trending = ich.trending(data[i]);
$('#trending').append(trending);
trendingArr.push(data[i]);
}
}
});
});
The data I am pulling in looks like this: sxswTrending({"Restaurants":[],"Bars":[],"Trending":[{"id":"43582f80f964a520dd281fe3","name":"Whole Foods Market","hereNow":12},{"id":"440da323f964a52092301fe3","name":"Austin Convention Center","hereNow":6}]})
Not sure where my hang up is, I am just trying to display the name in each object called Trending.
I have also put it up on JSFiddle: http://jsfiddle.net/xtian/W6mMu/
I simplified your code, to illustrate how to fix it.
See http://jsfiddle.net/adamzr/43WDa/