使用 Jade 遍历嵌套数组对象答案

【问题标题】：Iterate through nested array objects with Jade使用 Jade 遍历嵌套数组对象
【发布时间】：2017-03-18 06:03:56
【问题描述】：

我想用 Jade 在我的视图上呈现这些数据。这是从 QPX api 返回的。我有这样的数据结构。

{ 
  kind: 'qpxExpress#tripsSearch',
  trips: { 
    kind: 'qpxexpress#tripOptions',
    requestId: 'OqaX52F0Z433IbMlh0PNr6',
    data: {
      kind: 'qpxexpress#data',
      airport: [Object],
      city: [Object],
      aircraft: [Object],
      tax: [Object],
      carrier: [Object]
    },
    tripOption: [ [Object], [Object], [Object] ] 
  }
}

如何使用 Jade 访问 tripOption 中的嵌套对象数组？我似乎无法解决它。这是我的 Jade 模板：

block content
  .ui
    for data in result
      .ui_box
        .ui_box__inner
          .event
            span #{data.tripOption[0].slice[0]}

这是我从 Jade 收到的错误

Cannot read property '0' of undefined

路由器

router.get('/', function(req, res, next) {
  api.apiGet(function (data) {
    console.log(data) 
    res.render('index', {result: data})
  })
})

【问题讨论】：

将数据传递到视图时，路由处理程序的外观如何？在没有这些知识的情况下，数据和视图 atm 之间存在脱节。
我已经用路线更新了问题
#{data.tripOption[0].slice[0]} 切片后的[ ] 困扰我...
这来自 API 文档，但我已经尝试将其删除，但仍然收到错误消息。
.slice() 是 JavaScript 上的数组方法，而不是 Jade。不管怎样，你试过#{data.trips.tripOption[0]}吗？注意 data 和 tripOption 之间的trips。

标签： javascript node.js loops express pug

【解决方案1】：

您的for 循环正在对一个对象进行迭代，这将不起作用。这不是原生 javascript 中常见的 for..in 循环

下面的代码稍微修改了路由器并以更直接的方式将数据（tripOptions）传递给视图。首先是翡翠模板：

block content
  .ui
    for data in tripOptions
      .ui_box
        .ui_box__inner
          .event
            span #{data.someProp}

带有tripOption 数据的新路由器以tripOptions（复数）形式提供给视图：

router.get('/', function(req, res, next) {
  api.apiGet(function (data) {
    console.log(data) 
    res.render('index', {
      tripOptions: data.trips.tripOption
    })
  })
})

【讨论】：

好的，这很好，但现在我又遇到了另一个错误：Cannot read property 'length' of undefined。就在这条线上for data in tripOptions
是的，tripOptions 似乎没有指向数组。也许在你打电话给res.render 之前console.log(data) 看看你是否可以轻松地访问数据，例如尝试console.log(data.trips)，然后一次深入研究一个属性。
谢谢，到了！