0

У нас есть массив объектов newData(длина массива 9 ел.).Прохожу по нему циклом for...0f,на каждой итерации должна создаваться разметка html и вставляться в сам html.В итоге я получаю только 1 вставку этой разметки , то есть итерацию мы делаем 9 раз , а replaceItemTemplate ( разметка html ) создается только 1 раз!В чем проблема?

for(item of newData) {
    var replaceItemTemplate = '<div class="col-sm-3 col-xs-6">\
      <img src="$url" alt="$name" class="img-thumbnail">\
      <div class="info-wrapper">\
      <div class="text-muted">$name</div>\
      <div class="text-muted top-padding">$description</div>\
      <div class="text-muted">$date</div>\
      </div>\
    </div>';
    
    let resultHTML = replaceItemTemplate
     .replace(/\$name/gi, item.name)
     .replace("$url", item.url)
     .replace("$description", item.description)
     .replace("$date", item.date);

    firstBlock.innerHTML = resultHTML;
}

9
  • Это точно js?(2 символа)
    – user218976
    2 авг 2018 в 12:59
  • Да , сейчас я перепишу код немного! 2 авг 2018 в 13:00
  • 4
    Ну так Вы же не добавляете разметку, а на каждой итерации её заменяете... не?
    – Akina
    2 авг 2018 в 13:01
  • 1
    Добавляйте вёрстку, а не перезаписывайте: firstBlock.innerHTML += resultHTML;
    – Regent
    2 авг 2018 в 13:02
  • То есть мне нужно исп. не innerHTML , а appendChild()? 2 авг 2018 в 13:02

2 ответа 2

2

innerHTML полностью переписывает содержимое, то есть вы каждый раз переписываете содержимое, в итоге после цикла у вас останется только последний вариант

let resultHTML = ''
for(item of newData) {
    var replaceItemTemplate = '<div class="col-sm-3 col-xs-6">\
      <img src="$url" alt="$name" class="img-thumbnail">\
      <div class="info-wrapper">\
      <div class="text-muted">$name</div>\
      <div class="text-muted top-padding">$description</div>\
      <div class="text-muted">$date</div>\
      </div>\
    </div>';


    // добавляем к результату на каждой иттерации
    htmlResult += replaceItemTemplate
     .replace(/\$name/gi, item.name)
     .replace("$url", item.url)
     .replace("$description", item.description)
     .replace("$date", item.date);
}

firstBlock.innerHTML = resultHTML;
1

вместо

firstBlock.innerHTML = resultHTML;

используй

firstBlock.insertAdjacentHTML('beforeend', resultHTML);

for(item of newData) {
    var replaceItemTemplate = '<div class="col-sm-3 col-xs-6">\
      <img src="$url" alt="$name" class="img-thumbnail">\
      <div class="info-wrapper">\
      <div class="text-muted">$name</div>\
      <div class="text-muted top-padding">$description</div>\
      <div class="text-muted">$date</div>\
      </div>\
    </div>';

    let resultHTML = replaceItemTemplate
     .replace(/\$name/gi, item.name)
     .replace("$url", item.url)
     .replace("$description", item.description)
     .replace("$date", item.date);

    firstBlock.insertAdjacentHTML('beforeend', resultHTML);
}

и вообще

let resultHTML = `
<div class="col-sm-3 col-xs-6">
          <img src="${item.url}" alt="${item.name}" class="img-thumbnail">
          <div class="info-wrapper">
          <div class="text-muted">${item.name}</div>
          <div class="text-muted top-padding">${item.description}</div>
          <div class="text-muted">${item.date}</div>
          </div>
</div>
`

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.