如何解析gulp-jade中的外部json？

Question

我正在为我的模板系统使用 jade 模板，通过我的 gulpfile.js 将 json 文件作为 jade locals 传递，但我似乎无法深入研究json。我觉得我忽略了一些基本的东西，但在任何地方都找不到在线示例。

gulpfile.js:
将json文件传入jade

gulp.task('html', function() {
    gulp.src('./markup/*.jade')
        .pipe(jade({
            pretty: true,
            locals: JSON.parse( fs.readFileSync('./markup/data/website_data.json', { encoding: 'utf8' }) )
        }).on('error', gutil.log))
        .pipe(gulp.dest('../'))
});

然后在我的 jade 中，为了可读性，我只是将 locals 传递给一个变量。

- var employees = locals

我可以遍历一层深的 json：

翡翠：

for employee in employees
  if employee.Tier === 'Founder'
    li 
        button(data-bio="#{employee.LastName.toLowerCase()}") 
            img(src="/public/img/employees/#{employee.FirstName.toLowerCase()}-#{employee.LastName.toLowerCase()}.jpg", alt="#{employee.FirstName} #{employee.LastName} | #{employee.Title}")
            strong #{employee.FirstName} #{employee.LastName}
            | #{employee.Title}

json:

[
  {
    "FirstName":"John",
    "LastName":"Doe",
    "Title":"Strategist",
    "Tier":"Founder",
    "Description":"",
    "Email":"",
    "Links":""
  },
...
]

但这只对我有用，如果我循环遍历的项目在根目录中，一旦我使 json 更深一层，我就无法得到它基于 key 的工作。我想让 json 更深，这样我就可以在其中显示网站的不同部分，而不仅仅是员工。

[{
    "employees": [
        {
            "FirstName":"Jason",
            "LastName":"Bellinger",
            "Title":"Lorem Ipsum",
            "Tier":"",
            "Description":"",
            "Email":"",
            "Links":""
        },
        ...
    ]
}]

我尝试了几种不同的方法来深入研究 json，但到目前为止都失败了。

尝试 1：调整变量调用并保持相同的循环

- var employees = locals.employees

而且我在终端运行$gulp watch

中收到“无法读取未定义的属性'length'”

也试试：

- var employees = locals['employees']

相同的结果。

尝试 2：不要使用 var 并在我的循环中直接调用 locals

for employee in locals.employees

和

for employee in locals["employees"]

我最终遇到了同样的错误。

尝试 3：

保留var并调整循环

  - var employees = locals
  ...
  for employee in employees
    li #{employee.LastName}

然后我在终端中没有收到错误，但我没有收到任何内容。它产生一个空 li。

那么，我尝试在循环中更深入一层：

for employee in employees[0]
        li #{employee.LastName}

和

for employee in employees['employees']
        li #{employee.LastName}

而且我仍然没有收到任何错误，并且有一个是空的 li

我今天已经分析了足够多的 json 并且 jade 看起来很简单，我必须忽略一些基本的东西。有人请谦虚我。

我也涉足 gulp-data，但我正在用我的方法将数据输入 jade，所以我认为这是我在 jade 中的方法...

Answer 1

我知道这是基本的东西。我将所有内容都还原为原始设置并更改了 var，这很有效。

- var employees = locals[0]['employees']

说实话，我以为我已经试过了，但回去再试了一次……

Answer 2

您需要访问本地变量中的数组。 local = 1 的长度，即整个员工数组。
您需要将 employees = 设置为 locals 变量内的数组：
"- var employees = locals[0].employees"

如何解析gulp-jade中的外部json？

How to parse the external json in gulp-jade?

json

gulp

pug