如何在 gulp-jade 中解析外部 json？答案

【问题标题】：How to parse the external json in gulp-jade?如何在 gulp-jade 中解析外部 json？
【发布时间】：2015-07-24 15:56:44
【问题描述】：

我正在为我的模板系统使用玉模板，通过我的 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('../'))
});

然后在我的玉中，为了可读性，我只是将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的终端中得到“无法读取未定义的属性'长度'”

也试试：

- 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 中的方法...

【问题讨论】：

标签： json gulp pug

【解决方案1】：

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

【讨论】：

【解决方案2】：

我知道这是基本的东西。我将所有内容恢复为原始设置并更改了var，这正在工作。

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

说实话，我以为我已经尝试过了，但是又回去尝试了......

【讨论】：