从 pug 中的 JSON 对象正确创建表

Question

我正在尝试将我的 JSON 对象分解为它们各自的元素并动态填充表格。）

我猜想用哈巴狗做一种地图（动态填充表格。

        tr
          td.resultLog
            - let heatResult1Log = result.heat1Logs;
              for heatItem in heatResult1Log
                for item of heatItem
                #{item}
        tr

这是将结果发送给 pug 的代码：

return {

"Failures": {
    "coolCount1":coolFail1Rows.length/2 , coolCheck1Index:coolFails1Array,cool1Logs:coolFails1Logs,
    "heatCount1":heatFail1Rows.length/2 , heat1Logs:heatFails1Logs
  }};
}

这是我的 JS 代码返回的对象（暂时忽略加热方面，因为答案是一样的）

{ Failures:
   { coolCount1: 2,
     coolCheck1Index: [ 8865, 8866, 9077, 9078 ],
     cool1Logs:
      [ '[8865,"2019-03-14T04:00:00.000Z","3:10:00","cool","compressorCoolStage1On","auto","Sleep",74,74,75.3,"end"]',
        '[8866,"2019-03-14T04:00:00.000Z","3:15:00",null,null,null,null,null,null,null,"end"]',
        '[9077,"2019-03-14T04:00:00.000Z","20:50:00","cool","compressorCoolOff","auto","Home",76.8,76.8,77.3,"end"]',
        '[9078,"2019-03-14T04:00:00.000Z","20:55:00",null,null,null,null,null,null,null,"end"]' ],

} }

我尝试映射到单个对象（因为我希望它看起来像一张普通的表格）

table.resultHeader
        tr
          th Index
          th Date
          th Time
          th System Setting
          th System Mode
          th Calendar Event
          th Program Mode
          th Cool Set Temperature
          th Heat Set Temperature
        tr

        tr
          td.resultLog
            - let heatResult1Log = result.heat1Logs;
              for heatArray in heatResult1Log
                for item in heatArray
                td #{item}
        tr

看起来一个字母一个字母地返回数组。

现在从技术上讲我明白了，因为结果是作为数组的数组发送的，但是有什么选择吗？我希望我的表和索引对齐，它作为数组数组而不是单个元素的数组返回。

我的预期结果是它看起来像一张普通的桌子，即

<table style="width:100%">
  <tr>
    <th>Index</th>
    <th>Date</th> 
    <th>Time</th>
(etc) 
  </tr>
  <tr>
    <td>0</td>
    <td>Sept 2</td> 
    <td>5:30</td>
  </tr>
</table>

在每个“内部数组”的末尾（因为它是一个带有数组的数组），它将开始一个新行并为下一个数组填充元素。这就是现在的样子......（索引应该只有每个数组的第一个元素，第二个的日期等等）

我添加了一个示例 - 数字 5067 应该出现在索引下（作为返回的索引），日期应该出现在日期下。

如果我在循环中放置一个循环，会发生这种情况：

解决方案可能如下所示：

Answer 1

cool1Logs:
  [ '[8865,"2019-03-14T04:00:00.000Z","3:10:00","cool","compressorCoolStage1On","auto","Sleep",74,74,75.3,"end"]',
    '[8866,"2019-03-14T04:00:00.000Z","3:15:00",null,null,null,null,null,null,null,"end"]',
    '[9077,"2019-03-14T04:00:00.000Z","20:50:00","cool","compressorCoolOff","auto","Home",76.8,76.8,77.3,"end"]',
    '[9078,"2019-03-14T04:00:00.000Z","20:55:00",null,null,null,null,null,null,null,"end"]' ],

您正在迭代的对象是字符串数组。

'[8865,"2019-03-14T04:00:00.000Z","3:10:00","cool","compressorCoolStage1On","auto","Sleep",74,74,75.3,"end"]',

此代码工作正常，它会为您提供字符串中的字符。

for item in heatArray
            td #{item}

您需要将其作为数组传递给 pug 模板。如下所示

[8865,"2019-03-14T04:00:00.000Z","3:10:00","cool","compressorCoolStage1On","auto","Sleep",74,74,75.3,"end"]