"each element in group" 在 pug 中没有显示任何值

Question

我正在尝试从 JSON object 在 node.js 中提供的 res.render 中填充动态 row/col（以前称为表格） ].

我的问题是，简单的值很容易显示，但更复杂的操作，如 row/col 定义动态数量的元素（这里它恰好是特定有声读物的媒体文件）不是人口稠密。

这是我的模板文件中每个...块的片段：

div.form-group
  div.row
    div.col-2
      label(for='varMediaTitle') Titel:
    div.col
      input#MediaTitle.form-control(type='text', placeholder=varMediaTitle, name='varMediaTitle', required)
div.form-group
  div.row
    div.col-4
      label(for='MediaFileName') Audio Dateien:
  div.row
    div.col-1 Nr
    div.col-5 Name
    div.col-2 Groesse
  each mediaFile in varMediaFiles
    div.row
      each itemM in mediaFile
        div.col-1
          p #{itemM.part}
        div.col-5
          p #{itemM.name}
        div.col-2
        p #{itemM.size}
  div.row
    div.col
      input#MediaFileName.form-control(type='file', name='MediaFileName', required)

如前所述，模板中的简单元素（例如我在输入字段中简单显示（无需迭代）的媒体标题）已正确显示，但 varMediaFiles 中每个 mediaFile 的块未显示任何内容。

有趣的是，在检查结果 html 时，我可以看到正确的行数。也就是说，创建的行数对应于我的 json 文件中的元素数。

在这里你可以看到我从我的 node.js 函数调用表单：

res.render('tags', {
                title: 'RFID Tag Datenseite',
                headline: 'RFID Tag Daten',
                subheadline: 'Tag ' + obj.TagId + ' - ' + obj.MediaTitle,
                varTagId: obj.TagId,
                varTagPreTag: obj.TagPreTag,
                varTagChecksum: obj.TagChecksum,
                varTagRawData: obj.TagRawData,
                varMediaTitle: obj.MediaTitle,
                varMediaType: obj.MediaType,
                varMediaGenre: obj.MediaGenre,
                varMediaDescription: obj.MediaDescription,
                varMediaFiles: obj.MediaFileName,
                varMediaPictures: obj.MediaPicture
            });

这是 json 文件的结构（它是从文件系统读入的实际文件），值从中传递到表单：

{
  "TagChecksum": "0x97",
  "TagId": "759C71",
  "TagPreTag": "0xf00",
  "TagRawData": "0F00759C7197",
  "MediaTitle": "The 6th book",
  "MediaType": "Audiobook",
  "MediaGenre": "UNDEFINED",
  "MediaDescription": "Beschreibung",
  "MediaFileName": [{"part": "1", "name": "1st-file.mp3", "size": "6M"}, {"part": "2", "name": "2nd-file.mp3", "size": "8M"}],
  "MediaPicture": [{"pic": "1", "name": "1st-pic.jpg"}, {"pic": "2", "name": "2nd-pic.jpg"}, {"pic": "3", "name": "3rd-pic.jpg"}]
}

知道为什么没有迭代的简单值有效，但对 json 数组的迭代却不起作用吗？？？

我的第一个想法是，这是因为它是 json 结构中的数组，我可能对 json 文件的格式有疑问。但在那种情况下，我不明白为什么每个...块正确创建行数。

但是，还有一个小故障。在检查 html 输出（见附图）后，我注意到，迭代实际上创建了正确的行数（这里的媒体文件为 2），但每行的列太多了。看起来它把所有行的所有列都放在了所有行中 - 很奇怪。

任何人都可以阐明这一点吗？

致以诚挚的问候，非常感谢，

克里斯蒂安

Answer 1

我终于想通了，因为这个问题根本没有答案，但是有很多观点，所以可能 post 解决方案值得其他像我这样的新手找到它。

解决方法其实很简单。

第二次迭代（即我上面问题中的每个 itemM ... 块）完全是胡说八道，我只是摆脱了它。我没有遍历 json 数组结构之一中的元素，而是直接引用它。

我也用 'for' 交换了 'each' 作为声明，但我不确定是否有必要。

最后，我的每个...块（没有用）：

  each mediaFile in varMediaFiles
    div.row
      each itemM in mediaFile
        div.col-1
          p #{itemM.part}
        div.col-5
          p #{itemM.name}
        div.col-2
        p #{itemM.size}

成为...块（有效）：

    for mediaFile in varMediaFiles
      div.row
        div.col-1
          p #{mediaFile.part}
        div.col-5
          p #{mediaFile.name}
        div.col-2
          p #{mediaFile.size}

一旦我想通了，原因就很清楚了。我没有嵌套数组——在这种情况下，嵌套的 each 或 for 循环可能就可以解决问题。我有一个包含 json 元素数组的 json 结构。

[{"part": "1", "name": "1st-file.mp3", "size": "6M"}, {"part": "2", "name": "2nd-file.mp3", "size": "8M"}],

这个数组的每个元素也是一个 json 结构。由于它是一个 json 结构，我可以简单地按名称引用 json 元素的一部分，同时遍历数组元素。

有时它实际上比人们想象的要简单。

祝大家编码愉快，

基督教徒

"each element in group" 在 pug 中没有显示任何值

"each element in group" in pug does not show any value

each

json

node.js

twitter-bootstrap

pug