如何使用Handlebars迭代JSON结构

Question

我正在尝试使用把手表达式从一些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](第一个)

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/