Question

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

console.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,
        ...
      }
    }

这是我用帕格写的循环： ...

-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',
}]

Answer 1

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

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

Answer 2

解决了！！这是我终于想出的解决方案。

-var i = 1
each img in prodImages
    while i < 21
        - var imageName = 'image' + i
        - var image = img[imageName]
        mixin image(image, i, title)
           img.product-img(src='/images/' + image, id='image' + i, alt=title)
        +image(image, i, product.title)
        - i++

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

2 个答案: