Question

作为我刚接触javascript，我发现handleBar.js可以用来模拟动态数据。

我研究了一个工作正常的样本，json结构很简单直接。

 (function()
  {

    var wtsource = $("#some-template").html(); 
    var wtTemplate = Handlebars.compile(wtsource); 


var data = { users: [
      {url: "index.html", name: "Home" },
      {url: "aboutus.html", name: "About Us"},
      {url: "contact.html", name: "Contact"}
    ]};

Handlebars.registerHelper('iter', function(context, options) {
var fn = options.fn, inverse = options.inverse;
var ret = "";

if(context && context.length > 0) {
for(var i=0, j=context.length; i<j; i++) {
  ret = ret + fn($.extend({}, context[i], { i: i, iPlus1: i + 1 }));
}
} else {
ret = inverse(this);
}
return ret;
});

var temp=wtTemplate(data);
$("#content").html(temp);

})();


  <script id="some-template" type="text/x-handlebars-template">
  {{#iter users}}
 <li>
    <a href="{{url}}">{{name}}</a>
 </li>
 {{/iter}}

</script>

如何使用以下结构迭代json？请为下面的json结构建议迭代和创建模板的可行方法

var newData = { "NEARBY_LIST": {

        "100": {
            "RestaurantID": 100,
            "ParentRestaurantID": 0,
            "RestaurantName": "Chennai Tiffin",
            "listTime": [{
                    "startTime": "10:00",
                    "closeTime": "23:30"
                } ]
        },

        "101": {
            "RestaurantID": 101,
            "ParentRestaurantID": 0,
            "RestaurantName": "Biriyani Factory",
            "listTime": [{
                    "startTime": "11:00",
                    "closeTime": "22:00"
                }]
        }

    }
};

Answer 1

我不完全确定你的意思，但如果您的问题是如何使用/读取newData中的数据，请尝试以下方法：

newData = JSON.parse(newData); //parses the JSON into a JavaScript object

然后像这样访问对象：

newData.NEARBY_LIST //the object containing the array
newData.NEARBY_LIST[0] //the first item (key "100")
newData.NEARBY_LIST[1] //the second item (key "101")
newData.NEARBY_LIST[0][0] //the first field of the first item (key "RestaurantID", value "100")
newData.NEARBY_LIST[0][2] //the third field of the first item (key "RestaurantName", value "Chennai Tiffin")
newData.NEARBY_LIST[0][3][0] //the first field of the fourth field of the first item (key "startTime", value "11:00")

我希望这就是你要找的东西。

编辑：正如Siddharth指出的那样，上面的结构确实假设你有阵列。如果您不使用数组，则可以使用它们的名称来访问属性，就好像它们位于关联数组中一样（例如newData["NEARBY_LIST"]["100"]。我之所以说“属性”和“好像”是因为技术上JavaScript没有t支持关联数组。因为它们是技术上的属性，你也可以像newData.NEARBY_LIST那样访问它们（但我不建议在这种情况下，因为属性名称可能不以数字开头，所以你必须使用混合不同的符号）。

在这方面，我建议使用数组，因为它使得这么多东西变得容易（例如长度检查），并且几乎没有缺点。

EDIT2：此外，我强烈建议在整个代码中使用相同的camelcasing约定。你现在拥有它的方式（一半属性/变量以大写字母开头（例如“RestaurantName”，“RestaurantID”）而另一半位于lowerCamelCase（例如“listTime”，“startTime”））只是要求人（你或同事）犯错误。

Answer 2

访问对象的属性与Handlebars无关。如果您处理JSON并且希望以通用括号或点表示法访问它，则必须首先使用JSON.parse()函数将JSON解析为JavaScript对象。

完成此操作后，您可以按如下方式访问属性。

var property = newData['NEARBY_LIST']['100'].RestaurantName; // "Chennai Tiffin"

这是一个小提琴来说明。

http://jsfiddle.net/qzm0cygu/2/

有没有办法使用Handlebar.js迭代并显示json的键值对列表

2 个答案: