如何使用 Handlebars 遍历 JSON 结构答案

【问题标题】：How do I iterate through a JSON structure with Handlebars如何使用 Handlebars 遍历 JSON 结构
【发布时间】：2014-11-06 22:13:13
【问题描述】：

我正在尝试使用把手表达式从一些 JSON 构建菜单。我需要帮助弄清楚如何遍历 json 以访问数据值。

这是我现在拥有的：

<ul>Pseudo HTML Code for Menu 
    {{#each}}
        <li>
            {{menuGroup.parentMenuName}}
            <ul><li>menuItems.subMenuName</li></ul>
        </li>
    {{/each}}
</ul>

{  Pseudo JSON
   "menu":[  
      {  I have 6 of these arrays and I want to get the Parent menu name and description placed into each li tag
         "menuGroup":{  
            "parentMenuName":"MAIN",
            "description":"myDesc",
            "displayOrder":1,
            "menuCategory":"myCat",
         },
         "menuItems":[  
            {  
               "subMenuName":"Payments",
               "shortCode":"PAY"
               "key":"primaryKey"
            },
         ]
      }
   ]
}

最终，对于“菜单”中的每个 {Object}，我都会有一个“li”标签，其中填充来自嵌套对象的数据。任何帮助将不胜感激。我对车把表达不是很熟悉。

更新：

换句话说，我有一个类似 {{menu.[0].menuGroup.parentMenu}} 的结构。我可以通过这种方式完美地获得价值。对于一项。如何循环以从所有 6 个数组中获取值。不只是[0]（第一个）

【问题讨论】：

是 JSON 还是对象字面量？
如果这也是您所指的，menuItems 是一个对象数组。早些时候，我认为有另一个类似帖子的链接。那篇文章与我的问题并不完全相同，但它帮助我更好地了解了车把。如果那是你，也许在编辑之前，谢谢！（请重新发布链接）

标签： html json backbone.js handlebars.js

【解决方案1】：

您已将 menuItems 定义为对象数组，这就是您的代码无法正常工作的原因。

"menuItems":[  
        {  
           "subMenuName":"Payments",
           "shortCode":"PAY"
           "key":"primaryKey"
        },
     ]

要么将其更改为

"menuItems": {  
    "subMenuName":"Payments",
    "shortCode":"PAY"
    "key":"primaryKey"
}

或者把模板写成

<li>
    {{#menuItems}}
        {{subMenuName}}
    {{/menuItems}}
</li>

您的代码应该可以工作。

工作示例可以在这里找到。 http://jsfiddle.net/prabhat_rai/mhb1supn/

【讨论】：

谢谢，普拉巴特！您的解释和代码示例有帮助！但是，我现在注意到我的循环在第二个之后停止。例如，我的 {{menuGroup.parentMenuName}} 基于您的 jsfiddle 的输出是“MAIN，MAIN1，MAIN，MAIN，MAIN，MAIN” 奇怪的是，menuItems 循环完美。知道为什么 parentMenuName 循环在第二个之后失败吗？
你能给我一个提琴手链接，以便我可以检查一次代码
实际上，（这很有趣），在仔细检查 JSON 代码后，我注意到我收到的数据与我最初开始工作和预期的数据不同。代码没有问题。 :) 再次感谢您的帮助！