时间戳

首页 > 解决方案 > 使用 node 和 pug 传递数组的循环中的动态 var

pug - 使用 node 和 pug 传递数组的循环中的动态 var

问题描述

我什至不确定我是否能用词正确。我正在尝试创建一个循环，该循环遍历传入的图像数组。如果我直接调用图像，它会按预期工作

控制台.log(p.image1)

但我不知道如何循环。我知道有一种方法我就是找不到。

我尝试了几种不同的方法来完成它，但我一直在循环编码。

这是我的模型：...

prodImages:[
    {
        image1: {type: String,required: false},
        image2: {type: String,required: false},
        image3: {type: String,required: false},
        ...
    }
]

这是我的控制器：...

 const product = await Product.findById(prodId);
 const prodImages = product.prodImages;
    try{
      res.render('admin/edit-product', {
        prodImages: prodImages,
        ...
      }
    }

这是我用 Pug 编写的循环：...

-var i = 1
each p in prodImages
    while i < 21
    //- p.image1 returns image1 name from db
    mixin image(p, i, title)
        -var prodImg = 'p.'
        -var img = 'image' + i
        -var imageLink = prodImg + img
        img.product-img(src='/images/' + imageLink, id='image' + i, alt=title)
        +image(p, i, product.title)
            - i++

我希望输出为：

img class="product-img" src="/images/87b0e842d4f503f96b86d0106de08fd2.jpg " id="image1" alt="title"

但我得到：

img class="product-img" src="/images/p.image1" id="image1" alt="title"

这是我的控制台输出：

CoreMongooseArray [
    { _id: 5c2093e4328e48573485d0aa,
    image1: '87b0e842d4f503f96b86d0106de08fd2.jpg',
    image2: '35f6b5501e409f55efabe428909aebb1.jpg',
    image3: 'd5a90b18a1e40905c6ca49318ccbd33e.jpg',
}]

标签： pug

解决方案

您的问题在于数据的传递方式。这似乎是一个单元素数组，其中单个元素具有每个图像的键：

prodImages:[
    {
        image1: {type: String,required: false},
        image2: {type: String,required: false},
        image3: {type: String,required: false},
        ...
    }
]

您可以通过以下两种方式之一解决此问题。最简单的方法是访问循环中的单个元素：

each image in prodImages[0]
  p= prodImages[0][image]['type'] + " : " +  prodImages[0][image]['required']

有点混乱，不是吗？

更好的选择是将输入数据转换为这样的数组：

prodImages:[
  {type: String,required: false},
  {type: String,required: false},
  {type: String,required: false},
  ...
]

JavaScript 数组保证以正确的顺序进行迭代，但带有键的对象没有保证的迭代顺序。仅此一项，您就可以更好地使用转换后的输入。

无论如何，如果你像上面的例子一样转换你的 prodImages 数组，那么你的 pug 循环会很好很简单：

each image in prodImages
  p= image.type + " : " + image.required

推荐阅读