遍历json对象数组
[英]Iterate over a json object array in blaze
问题描述
I am new to meteor, and am struggling with using #each in blaze. 
我是新来的流星，并且一直在努力使用#each 。 I tried following this answer on stackoverflow , but my requirement is slightly different. 我尝试在stackoverflow上遵循此答案 ，但我的要求略有不同。
I have a json object array: 我有一个json对象数组：
{
"accounting": [{
"firstName": "John",
"lastName": "Doe",
"age": 23
},
{
"firstName": "Mary",
"lastName": "Smith",
"age": 32
},
{
"firstName": "Mike",
"lastName": "Nolan",
"age": 21
}
]
}
How do I display firstName from each object, using blaze (specifically using #each to iterate the array) in a meteor project. 如何在流星项目中使用blaze（特别是使用#each迭代数组）显示每个对象的firstName。
I tried a lot of different ways, using multiple helper methods, but am not able to make it happen. 我尝试了多种不同的方法，使用了多种辅助方法，但无法实现。 If someone can please help. 如果有人可以帮忙。
Also, if it is not possible, please tell alternatives to achieve the same. 另外，如果不可能，请告诉替代方案以达到相同目的。
The data is coming from an API call, and the format of data is a json object, but is stored as a Session variable (so that's where I will be getting it from in the helper method, using Session.get() ). 数据来自API调用，数据格式为json对象，但存储为Session变量（因此，我将使用Session.get()在helper方法中从中获取数据）。
2 个解决方案
解决方案1
2 已采纳 2015-11-05 16:09:33
It's going to depend on where your data is coming from. 这将取决于您的数据来自何处。 In my example you can replace my hard-coded variable with the source of your object. 在我的示例中，您可以将我的硬编码变量替换为对象的源。 If you add where it is coming from I can modify my solution. 如果您添加它的来源，我可以修改我的解决方案。
Basically, you just return the array of objects inside of the JSON object with a helper function. 基本上，您只需要使用辅助函数返回JSON对象内部的对象数组即可。 From there you can call the helper in an #each block, and reference firstName directly with {{firstName}} 在此处，您可以在#each块中调用帮助程序，并直接使用{{firstName}}引用firstName
Template 模板
<template name="yourTemplateName">
{{#each accounting}}
{{firstName}}
{{/each}}
</template>
Helper 帮手
Template.yourTemplateName.helpers({
accounting: function () {
var data = Session.get('apiResponse');
//You return the array of objects, which can then be iterated with each
if (!_.isEmpty(data)){
return data.accounting;
} else {
return []
}
}
});
解决方案2
1 2015-11-05 18:20:21
I'm assuming that the API response is in a session variable called apiResponse. 我假设API响应位于称为apiResponse的会话变量中。
Define a helper as follows: 定义一个助手，如下所示：
Template.body.helpers({
response: function () {
return Session.get('apiResponse');
}
});
In your template, call the response helper with a #with template tag to set a data context and inside this tag iterate over the accounting array using a #each template tag. 在您的模板中，使用#with模板标签调用响应帮助器以设置数据上下文，并在此标签内使用#each模板标签遍历计费数组。
<body>
{{#with response}}
{{#each accounting}}
<p>{{firstName}} {{lastName}} is {{age}} years old.</p>
{{/each}}
{{/with}}
</body>
You will see this in your browser window - 您将在浏览器窗口中看到此内容-
John Doe is 23 years old.
Mary Smith is 32 years old.
Mike Nolan is 21 years old.
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.