从js文件中获取迭代变量答案

【问题标题】：Get iteration variable from js file从js文件中获取迭代变量
【发布时间】：2021-07-17 10:14:24
【问题描述】：

我必须遍历由[{ title: '', desc: '', svg: '' }, ...] 组成的对象数组。由于 SVG 代码太大，我不想用大量 SVG 代码弄乱我的 .pug 文件。

有什么方法可以让我从另一个 JS 文件中导入这个 Array 并直接使用它而不在其中输出/生成数组来编译 html，就像 PUG 中的普通 inlie JS 一样：

someMagicImport data.js

each feature in data.features
  li= feature.title

数据文件：data.js

const features = [
 { title: '...', desc: '...', svg: '...' },
 // .... other objects
]

所以，简单的问题是如何使用data.js 中定义的上述特征数组并在我的.pug 文件中使用它进行迭代。

问候。

更新 1：更详细的问题。更新 2：我没有使用 expressJS 或 Django 等任何后端框架。我只是从 PUG 生成 HTML 标记。

【问题讨论】：

【解决方案1】：

现在知道你只是在使用 PugJS，你可以这样处理它。使用unbuffered code block 创建一个新的 pug 文件，使用您的数据对象声明一个变量，然后在任何您需要的地方include 该文件。

features.pug

-
  const features = [
    { title: '...', desc: '...', svg: '...' },
    // .... other objects
  ]

index.pug（现在您可以访问 features 对象）

include features

ul 
  each feature in features
    li= feature.title

【讨论】：

对不起，如果我没有正确解释它。我在另一个文件（data.js）中有对象数组，我想在我的.pug 文件中循环该对象。我尝试了include 的解决方案，但它包含纯文本形式的 js 文件，而不像哈巴狗的 JS。问候。
@JDSolanki 你是如何用 ExpressJS、Gulp 或其他东西编译 Pug 的？
感谢您提供完整示例。我非常感谢您的帮助。但是，我只使用简单的 HTML，没有像 expressJS 这样的后端服务器。我只是使用 PUG 生成 HTML 标记。所以，你的例子是正确的，但我试图单独在 PUG 中实现这一点，而不像我们在 expressJS 等框架中那样将它添加到全局变量中。我希望这个数组就像我们写的普通 JS 快递一样 - var someVar = 'admin' 但来自另一个文件。
我再次更新了我的答案@JDSolanki。如果能解决您的问题，请务必采纳。
非常感谢。这解决了问题:)