динамическая переменная в цикле с использованием переданного массива с использованием узла и мопса - PullRequest
Новая
       7

динамическая переменная в цикле с использованием переданного массива с использованием узла и мопса

0 голосов
/ 26 декабря 2018

Я даже не уверен, смогу ли я сказать это правильно.Я пытаюсь создать цикл, который проходит через переданный массив изображений.Если я вызываю изображение напрямую, оно работает как положено

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

Это мой цикл, написанный на 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',
}]

Ответы [ 2 ]

0 голосов
/ 26 декабря 2018

решена !!Это решение, которое я наконец-то понял. 

-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++
0 голосов
/ 26 декабря 2018

Ваша проблема в том, как данные передаются.Похоже, это массив из одного элемента, в котором один элемент имеет ключи для каждого изображения: 

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
...