Handlebars - 如何导航模板的 JSON 数据答案

【问题标题】：Handlebars - How to navigate JSON data for templateHandlebars - 如何导航模板的 JSON 数据
【发布时间】：2015-10-15 22:52:45
【问题描述】：

我的 JSON 数据如下所示：

{ “审查”： { “计数”：“1”， “概括”： [ { “Q1”：“9.50”， “Q2”：“9.50”， “Q3”：“9.00”， “Q4”：“8.75”， “Q5”：“7.63”， “Q6”：“8.88”， “Q7”：“9.38”， “Q8”：“9.75”， “Q9”：“9.38”， “Q10”：“9.00”， “Q11”：“9.75”， “Q12”：“9.75”， “Q13”：“9.75”， “Q14”：“8.13”， “Q15”：“9.00”， “Q16”：“8.88”， “Q17”：“8.00”， “Q18”：“9.38”， “Q19”：“9.88”， “Q20”：“10.00”， “Q21”：“10.00”， “Q22”：“7.00”， “Q23”：“9.75”， “Q24”：“9.25”， “Q25”：“8.63”， “Q26”：“9.00”， “Q27”：“6.50”， “Q28”：“9.50”， “Q29”：“9.63”， “Q30”：“9.75”， “Q31”：“9.38”， “Q32”：“8.63”， “Q33”：“9.50”， “Q34”：“7.38”， “Q35”：“6.88”， “Q36”：“7.38”， “Q37”：“9.88”， “Q38”：“9.50”， “Q39”：“7.75”， “Q40”：“8.25”， “Q41”：“9.75”， “Q42”：“9.75”， “Q43”：“9.63”， “Q44”：“9.38”， “Q45”：“9.88”， “Q46”：“9.38”， “Q47”：“10.00”， “Q48”：“9.88”， “Q49”：“10.00”， “Q50”：“9.88”， “Q51”：“9.75”， “Q52”：“9.38” } ] } }

我正在尝试创建一个 Handlebars 模板，它允许我迭代某个 div 块。我正在尝试列出“摘要”部分的 @index 值，但似乎找不到正确的语法来获取它们。

我可以得到

{{#each reviews.summary}}

{{/each }}

我尝试在每个语句中使用 {{#key}}，但我得到 0 - 这是“摘要”中第一项的数组键。我如何输出该数组中的键值列表？本质上，Q1，Q2，......等等。

【问题讨论】：

我只是在玩这个并意识到数据真的很尴尬（我现在看到了问题）。 summary 是一个数组，但只有一个（巨大的）对象！ {{each}} 似乎是合理的，但只有一件事要循环；您需要 52 个属性。模板在脚本中，所以我认为通过道具循环可能会起作用？
你看到下面的答案了吗？
嗨 wazz，是的，我确实看到了答案 - 我只是没有机会尝试实施您的建议。

标签： arrays json handlebars.js

【解决方案1】：

编辑：

这适用于第一个属性：

{{#each review.summary}}
    {{Q1}}
{{/each }}

编辑：

车把模板：

{{#each qdata}}
    {{this}}
{{/each }}

js:

// new function:
function getQData(data) {
    var arQData = [];
    var obj = data.review.summary[0]; // here's the data we need.

    for (var prop in obj) {
        //alert("obj." + prop + " = " + obj[prop]);
        arQData.push(obj[prop]);
    }
    return arQData;
}

// create a new object for the filtered data. this seemed
// necessary (?) so i could put 'qdata' in the html template.
// call (new) function that does the filtering. 
// dataIn argument is the JSON data.
var d = { qdata: getQData(dataIn) };

// handlebars stuff.
var context = d;
var html = template(context);
$("#results").html(html); // wherever your results go.

对象属性：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in

【讨论】：

我使用了获取对象属性的简单版本。你可能想使用hasOwnProperty() 版本。