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

I have started to learn handlebar.js . I am struggling to display json data .

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

My json look like this:

我的json看起来像这样：

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

here this json is coming from server response so I don't know any key and value. I have to show key and value dynamically by using handlebar ...I have tried with eachKey but I have not got solution for that . Can anyone help me?

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

3 个解决方案

#1

You can render the keys/values of a list in a Handlebars template like this:

您可以在Handlebars模板中渲染列表的键/值，如下所示：

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

#2

First thank you tobi this did lead to what I needed getting the key.

首先，谢谢你，这确实导致我需要获得密钥。

In case it was not clear for the OP "this" is referring to the current object of that iteration.

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

So in your case data the object has the array record1 with 2 objects that are arrays of objects: first and second.

因此，在您的案例数据中，对象具有数组record1，其中包含两个对象数组的对象：第一个和第二个。

Using each:

使用每个：

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

would give you: first: (object, array) second: (object, array)

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

You will be looping over the object (data). In this if you wanted to dig down you would need a counter to get anywhere further. I would recommend using a handlebars block helper to get there.

您将循环遍历对象（数据）。在这种情况下如果你想挖掘你需要一个计数器来进一步。我建议使用把手块助手来到那里。

Here is the documentation: http://handlebarsjs.com/block_helpers.html

以下是文档：http：//handlebarsjs.com/block_helpers.html

#3

For objects:

对象：

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

Note that only properties passing the hasOwnProperty test will be enumerated.

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

For arrays:

对于数组：

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

#1