如何将对象从 Express 应用程序传递到 Pug 前端？答案

【问题标题】：How to pass object from Express app to Pug frontend?如何将对象从 Express 应用程序传递到 Pug 前端？
【发布时间】：2020-02-24 21:58:23
【问题描述】：

所以我在将数据从我的快递后端传递到我的哈巴狗前端时遇到了问题。我想渲染从我的数据库中提取的位置数据，将其传递到位置页面并迭代位置数据。浏览器无法识别数据。我做错了什么？

app.js

    app.get('/:store_id', async (req, res) => {
      await db.stores.findById(req.params.store_id)
        .then(locations => {

          // example of locations
          locations = [ 
          {
            location: 'Fremont',
            latitude: 37.49267,
            longitude: -121.94409
          },
          {
            location: 'Folsom',
            latitude: 38.64392,
            longitude: -121.18621
          }
        ];
        res.render('location', {locations})
      }).catch(error => res.render('landing'))
    })

location.pug

block content
    script.

        locations.forEach(function(sc) {
          // do something with sc
        }

"express": "^4.17.1",
"pug": "^2.0.4",

【问题讨论】：

我知道接受 pug 变量有一些变体 - 例如 #{variable} 和 !{variable} 但不太确定差异或用例
这能回答你的问题吗？ How to pass a Node.js variable to the inside of a Pug script tag?

标签： express pug

【解决方案1】：

这将在已处理的 HTML 文件中呈现为脚本块：

<script>
  locations.forEach(function(sc) {
      // ...
  }
</script>

它可能不会在页面加载时做任何事情（除非您碰巧有一个可迭代的locations 变量可用）。你想用帕格的iteration syntax：

content
  each location in location
    //- do stuff

【讨论】：