如何使用车把模板显示 json 对象键和值？答案

【问题标题】：how to show json object key and value using handlebar template?如何使用车把模板显示 json 对象键和值？
【发布时间】：2017-12-24 07:18:50
【问题描述】：

我已经开始学习 handlebar.js 了。我正在努力显示 json 数据。

我的 json 看起来像这样：

 var data={
          "record1":
          [
             {
               "first":
                      [
                       {
                         "name":"john",
                         "city":"newyork"  
                       },
                       {
                         "name":"britto",
                         "city":"bangalore"  
                       }
                      ]
             },
            {"second":
                 [
                  {
                    "name":"franklin",
                    "city":"newyork"  
                  },
                  {
                    "name":"leo",
                    "city":"bangalore"  
                  }
                ]
            }
        ]
    };

这里这个 json 来自服务器响应，所以我不知道任何键和值。我必须使用车把动态显示键和值...我已经尝试过 eachKey 但我没有解决方案。谁能帮帮我？

【问题讨论】：

标签： jquery json handlebars.js

【解决方案1】：

您可以像这样在 Handlebars 模板中呈现列表的键/值：

{{#each object}}
  {{@key}}: {{this}}
{{/each}}

【讨论】：

我尝试过使用列表，但显示的是项目键，但值是对象
您必须深入了解数据结构，请参阅this fiddle 以获取数据示例。
我找到了访问密钥的方法并找到了这个问题。但是我的一些 json 数据是数组。所以@key 永远不会起作用，请改用@index。这适用于在数组中搜索访问密钥的人。谢谢@tobi。
我不明白为什么@value 不是默认值，但this 有效。感谢分享！

【解决方案2】：

首先感谢tobi，这确实导致了我需要得到钥匙。

如果 OP 不清楚，“this”指的是该迭代的当前对象。

因此，在您的情况下，数据对象具有数组 record1，其中 2 个对象是对象数组：第一个和第二个。

使用每个：

{{#each record1}}
    {{@key}}: {{this}}
{{/each}}

会给你：第一：（对象，数组）第二：（对象，数组）

您将遍历对象（数据）。在这种情况下，如果您想深入挖掘，则需要一个柜台才能走得更远。我建议使用车把块助手来到达那里。

这是文档：http://handlebarsjs.com/block_helpers.html

【讨论】：

【解决方案3】：

对于对象：

{{#each myObject}}
    Key: {{@key}} Value = {{this}} //renders object like {key: value}
{{/each}}

请注意，只有通过hasOwnProperty 测试的属性才会被枚举。

对于数组：

{{#each myArray}}
    Index: {{@index}} Value = {{this}}
{{/each}}

【讨论】：