html - 如何使用 Handlebars 遍历 JSON 结构

Question

我正在尝试使用 handlebars 表达式从一些 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”标签，其中填充了来自嵌套对象的数据。任何帮助将不胜感激。我对 Handlebars 表达式不是很熟悉。

更新:

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

Answer 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/