Handlebars遍历Obj1时按名称匹配读取Obj2属性的实现问题

问题根因 #

你当前无法正常访问Obj2的原因有两个：

1. {{#Obj1}} 是Handlebars的块级遍历助手，进入这个块之后上下文会切换为Obj1的当前遍历元素，直接写Obj2默认查找的是当前元素下的Obj2属性，自然找不到外层传入的Obj2。
2. 你没有加名称匹配逻辑，即使能访问到Obj2，它本身是数组，直接取.Country也拿不到对应值。
   另外你给出的render代码有语法错误，对象的属性之间要用逗号分隔，不能用分号。

方案1：后端提前合并数据（推荐，性能更高、模板逻辑更简洁） #

渲染之前先把Obj2转换为以Name为键的映射表，再给Obj1的每一项补充Country字段即可，修改JS代码如下：

// 将国家数据转为键值对映射，查找效率远高于遍历
const countryMap = countryData.reduce((map, item) => {
  map[item.Name] = item.Country
  return map
}, {})
// 给人员数据补充国家字段
const processedPerson = personData.map(item => ({
  ...item,
  Country: countryMap[item.Name] || '' // 匹配不到则留空
}))
// 修正原代码的语法错误，属性之间用逗号分隔
res.render('home',{
  Obj1: processedPerson
})

模板部分直接读取Country即可，不用修改遍历逻辑：

<tbody>
    {{#Obj1}}
    <tr>
        <td>{{Name}}</td>
        <td>{{Place}}</td>
        <td>{{Country}}</td>
    </tr>
    {{/Obj1}}
</tbody>

方案2：模板层处理（不想修改后端逻辑时使用） #

先给Handlebars注册一个自定义查找助手，注意这段代码要写在渲染路由之前：

const hbs = require('hbs')
hbs.registerHelper('getCountry', function(personName, countryList) {
  const target = countryList.find(item => item.Name === personName)
  return target ? target.Country : ''
})

模板中通过../回退到上一级上下文拿到根作用域的Obj2，调用助手即可：

<tbody>
    {{#Obj1}}
    <tr>
        <td>{{Name}}</td>
        <td>{{Place}}</td>
        <td>{{getCountry Name ../Obj2}}</td>
    </tr>
    {{/Obj1}}
</tbody>

内容的提问来源于stack exchange，提问作者Utkrisht Agrawal