Вывод данных в цикле Handlebars.js

243

11 июля 2017, 21:11

Всем здравствуйте.

Дело в том, что не могу понять как можно пройтись по этим данным и вывести их средствами Handlebars.js, обратится отдельно к каждому не проблема, а вот вывести все не понятно как.

Возможно есть что-то подобное (код ниже выдумка:)).

 .......

Код получения данных из таблицы GOOGLE EXEL

$.getJSON("https://spreadsheets.google.com/feeds/list/XXXXXXX/od6/public/values?alt=json", function(data) {
    data = data['feed']['entry'];
    var goods = {};
    for (var key in data) {
        var id = data[key]['gsx$id']['$t'];
        var name = data[key]['gsx$name']['$t'];
        var cost = data[key]['gsx$cost']['$t'];
        var description = data[key]['gsx$description']['$t'];
        var image = data[key]['gsx$image']['$t'];
        var kg = data[key]['gsx$kg']['$t'];
        goods[id] = {};
        goods[id]['name'] = name;
        goods[id]['cost'] = cost;
        goods[id]['description'] = description;
        goods[id]['image'] = image;
        goods[id]['kg'] = kg;
    }
        // goods - здесь храним все дынные (скриншот вида приложил)
        var container = $(".shop");
        source = $("#shop").html(),
            template = Handlebars.compile(source),
            html = template(goods);
        container.append(html);
});

Данные на выходе такого вида

{
"0": {
    "name": "1",
    "cost": "2",
    "description": "3",
    "image": "4",
    "kg": "5"
},
"1": {
    "name": "1",
    "cost": "2",
    "description": "3",
    "image": "4",
    "kg": "5"
},
"2": {
    "name": "1",
    "cost": "2",
    "description": "3",
    "image": "4",
    "kg": "5"
}
}

Answer 1

#each может итерировать по объекту, поскольку объект у вас неименованный, то надо использовать {{#each this}}. Вот небольшой пример:

const myData = { 
  0: {name: "Alex"}, 
  1: {name: "Boris"}, 
  2: {name: "Chris"}   
} 
 
const templateText = $('#template').html(); 
const hbTemplate = Handlebars.compile(templateText); 
 
$('#container').html(hbTemplate(myData));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.10/handlebars.min.js"></script> 
 
<script type="x/handlebars" id="template"> 
<ul> 
    {{#each this}} 
    	<li>{{name}}</li> 
    {{/each}} 
</ul> 
</script> 
 
<div id="container"> 
</div>