在 Handlebars 中的另一个对象的循环内显示不同的 JSON 个对象以获得条件
Show different JSON objects inside loop of other object in Handlebars for a condtition
我正在将两个不同的对象从 JS 文件渲染到 HBS 文件。让这些对象成为 Obj1 和 Obj2。在 HBS 文件中,我在 table 中循环 Obj1。但是在 table 的某行,我想访问 Obj2。我无法访问它。
home.hbs
<tbody>
{{#Obj1}}
<tr>
<td>{{Name}}</td> //From Obj1 (Working Fine)
<td>{{Place}}</td> //From Obj1 (Working Fine)
<td>{{Obj2.Country}}</td> //Here I want to access value from Obj2 if Obj1.Name==Obj2.Name
</tr>
{{/Obj1}}
</tbody>
JS
res.render('home',{
Obj1: personData;
Obj2: countryData;
})
对象
Obj1=[{姓名:约翰,地点:纽约},{姓名:拉曼,地点:新德里}]
Obj2=[{姓名:约翰,国家:美国},{姓名:拉曼,国家:印度}]
那是因为 Obj2
是一个 Array
而它没有 属性 Country
。
所以,你可以做 Obj2[<index>].Country
比如 Obj2[0].Country
编辑:您可以像这样循环访问两个对象。
var Obj2 = [{Name: "John", Country: "USA"},{Name: "Raman", Country: "India"}];
var Obj1 = [{Name: "John", Place: "New York"},{Name: "Raman", Place: "New Delhi"}];
Obj2.forEach((e, i) => {
console.log(e, Obj1[i]);
})
首先,如果可能的话,我建议您更改数据结构。由于从您提供的示例数组中可以清楚地看出,每个数组(Obj1
和 Obj2
)中的数据是高度相关的。拥有一个包含以下对象的数组更有意义:
{
"Name": "John",
"Place": "New York",
"Country": "USA"
}
而不是将地方和国家拆分为单独数组中的对象,由数组索引链接。
旁白:我还建议重命名这些变量——“Obj1”和“Obj2”——因为它们是数组,比对象更具体。
但是,如果您绝对必须使用这两个数组,则可以从一个数组中获取 属性,同时使用 context path, the lookup helper, and the @index data-variable.[=28= 遍历另一个数组]
我们要做的是:在数组Ojb1
的循环中,从数组Obj2
中对应的迭代索引处获取对象,并得到它的Country
属性.
Handlebars 提供了一个方便的数据变量,@index
,可以在循环中使用它来获取当前迭代索引。我们可以使用它在同一索引处查找 Obj2
中的对象:lookup ../Obj2 @index
。请注意,我们必须在 Obj2
前加上 ../
,这告诉 Handlebars 我们必须将单个上下文级别提升到 Obj1
和 Obj2
所在的位置。一旦我们有了那个对象,我们就可以使用第二次查找来获取它的 Country
属性.
完整代码变为:
{{lookup (lookup ../Obj2 @index) 'Country'}}
括号是必需的,因为嵌套查找是 subexpression.
我创建了一个fiddle供您参考。
我正在将两个不同的对象从 JS 文件渲染到 HBS 文件。让这些对象成为 Obj1 和 Obj2。在 HBS 文件中,我在 table 中循环 Obj1。但是在 table 的某行,我想访问 Obj2。我无法访问它。
home.hbs
<tbody>
{{#Obj1}}
<tr>
<td>{{Name}}</td> //From Obj1 (Working Fine)
<td>{{Place}}</td> //From Obj1 (Working Fine)
<td>{{Obj2.Country}}</td> //Here I want to access value from Obj2 if Obj1.Name==Obj2.Name
</tr>
{{/Obj1}}
</tbody>
JS
res.render('home',{
Obj1: personData;
Obj2: countryData;
})
对象
Obj1=[{姓名:约翰,地点:纽约},{姓名:拉曼,地点:新德里}]
Obj2=[{姓名:约翰,国家:美国},{姓名:拉曼,国家:印度}]
那是因为 Obj2
是一个 Array
而它没有 属性 Country
。
所以,你可以做 Obj2[<index>].Country
比如 Obj2[0].Country
编辑:您可以像这样循环访问两个对象。
var Obj2 = [{Name: "John", Country: "USA"},{Name: "Raman", Country: "India"}];
var Obj1 = [{Name: "John", Place: "New York"},{Name: "Raman", Place: "New Delhi"}];
Obj2.forEach((e, i) => {
console.log(e, Obj1[i]);
})
首先,如果可能的话,我建议您更改数据结构。由于从您提供的示例数组中可以清楚地看出,每个数组(Obj1
和 Obj2
)中的数据是高度相关的。拥有一个包含以下对象的数组更有意义:
{
"Name": "John",
"Place": "New York",
"Country": "USA"
}
而不是将地方和国家拆分为单独数组中的对象,由数组索引链接。
旁白:我还建议重命名这些变量——“Obj1”和“Obj2”——因为它们是数组,比对象更具体。
但是,如果您绝对必须使用这两个数组,则可以从一个数组中获取 属性,同时使用 context path, the lookup helper, and the @index data-variable.[=28= 遍历另一个数组]
我们要做的是:在数组Ojb1
的循环中,从数组Obj2
中对应的迭代索引处获取对象,并得到它的Country
属性.
Handlebars 提供了一个方便的数据变量,@index
,可以在循环中使用它来获取当前迭代索引。我们可以使用它在同一索引处查找 Obj2
中的对象:lookup ../Obj2 @index
。请注意,我们必须在 Obj2
前加上 ../
,这告诉 Handlebars 我们必须将单个上下文级别提升到 Obj1
和 Obj2
所在的位置。一旦我们有了那个对象,我们就可以使用第二次查找来获取它的 Country
属性.
完整代码变为:
{{lookup (lookup ../Obj2 @index) 'Country'}}
括号是必需的,因为嵌套查找是 subexpression.
我创建了一个fiddle供您参考。