Цикл внутри метода append. JS

140
06 августа 2018, 15:30

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

Пример кода:

   array.forEach(function(item) {
      $('body').append(function() {
        return '<div class="items-info">' +
        '<div class="items-info-title">' + item.title + '</div>' +
        '<div class="items-info-more">' + 
          item.more.forEach(function(value) {
             return '<div>'+value+'</div>';
          })
        + '</div>' +
        '</div>'
      })
    });

Пример массива:

{title: "Econom", more: ["Скидка 10%", "Карта"]}
{title: "Normal", more: ["Скидка 15%", "Карта", "Кэшбек 1%"]}

Подскажите как привести код в рабочее и правильное состояние

Answer 1

метод forEach ничего не возвращает.

Так как тут на основе одного массива получается другой - можно применить метод map.

Для его применения достаточно заменить .forEach На .map.

Так как map в данном случае вернет массив строк, а нужна одна большая строка, для их объединения можно воспользоваться методом .join

В итоге код может принять следующий вид:

'<div class="items-info-more">' + 
      item.more.map(function(value) {
         return '<div>'+value+'</div>';
      }).join('')
+ '</div>' +
Answer 2

Используйте map и join:

let str = [ 'test', 'string' ].map(item => '<div>' + item + '</div>').join('');
// результат: '<div>test</div><div>string</div>'
READ ALSO
Загрузка изображений на сайте

Загрузка изображений на сайте

При использовании media-запросов в CSS будет ли загружаться background для десктопа, если разрешение соответствует мобильному устройству?

199