Проблема с конкатенацией?

Question

[Дмитрий Марков]

Почему в div.archive-works__items не выводитсяarchiveProjectCart(params.projects[i])?

console.log(this.archiveProjectCart(params.projects[i]))

говорит, что карточки есть и заполнены.

if( spatOut.archive ) {
	this.archiveWrap.innerHTML = '';
	spatOut.archive.forEach(el => {
		this.archiveWrap.insertAdjacentHTML('beforeEnd', this.archiveProjectCarts(el));
	})
}
archiveProjectCarts(params) {
	let html =  `
		<div class="archive-works__wrap">
			<p class="archive-works__year">${params.year}</p>
			<div class="archive-works__items">`
				for(let i = 0; i < params.projects.length; i++) {
// Здесь this.archiveProjectCart почему то не выводит 
					this.archiveProjectCart(params.projects[i])
				}
			`</div>
		</div>
	`
	return html
}

archiveProjectCart(params) {
	let html = `
		<div class="archive-work">
			<a class="archive-work__name" href="${params.url}">${params.title}</a>
			<p class="archive-work__desc">${params.desc}</p>
		</div>
	`
	return html;
}

Comments

[Andrew]

Консоль иногда полезно открывать. Там даже строка ошибки пишется, обычно.

[Дмитрий Марков]

Andrew, спс. Вот только ошибок та нету

Answer 1

[Arman]

O_o

let buf = '';
        for(let i = 0; i < params.projects.length; i++) {
// Здесь this.archiveProjectCart почему то не выводит 
          buf += this.archiveProjectCart(params.projects[i])
        }
  let html =  `
    <div class="archive-works__wrap">
      <p class="archive-works__year">${params.year}</p>
      <div class="archive-works__items">${buf}</div>
    </div>
  `
  return html

Answer 2

[Макс]

Потому что нужно использовать map() и оператор конкатенации

(params.projects || []).map(function(project) {
	return this.archiveProjectCart(project)
})

(params.projects || []).map(project => this.archiveProjectCart(project))


let html =  `
    <div class="archive-works__wrap">
      <p class="archive-works__year">${params.year}</p>
      <div class="archive-works__items">` + (params.projects || []).map(project => this.archiveProjectCart(project)) + 
      `</div>
    </div>
  `