Шаблонизация в client-side JavaScript. Как лучше организовать в данном случае?

Question

[ZaxapKramer]

Имеются данные, генерируемые в js-файле: из всякого разного формируется json, массивы циклом перерабатываются и т.п., то есть, на "выходе" из js получаем данные в json.
Передаются данные в html, где тоже имеется свой цикл, который делает ровно то же самое, но уже перебирая "красивые" значения.
Если бы все находилось в шаблоне, в html, шаблонизатор был бы, по сути, не нужен... а так - собираю разные данные, перерабатываю их в js-файле в json - отдаю html.

Больше всего убивает то, что в html-файле снова эти данные перелопачиваются...

Вот, собственно, наглядный пример:

// ...

var el = $('#searchResults')[0],
	le = $(el).render().before();

// ...

$.json({
	url: url,
	params: {
		/* some params */
	},
	success: function(data) {
		var data_ = { results: [] };

		//////////// Цикл
		$.each(data.c.content.webcolors, function(result, i) {
			data_.results[i] = {
				'title'     : result.unicode_title.getText(),	// Title
				'colorCode' : result.code.web,			// Color Code
				'desc'      : result.text.small_text,		// Description
				'link'      : result.webpage			// Link
			}
		});

		data_ = $(el).render(le).now(data_);

		data_.replace();
	}
});

// ...

<div id="MyColors" type="text/template">
	//////////// Снова цикл, перебирает буквально то же самое
	<% $.each (f.results, function(r) { %>
		<div class="color">
			<h3 class="title"><%=r.title%>: <%=r.colorCode%></h3>
			<div class="links">
				<a class="link"><%=r.link%></span>
				<a class="search-link" href="https://www.google.ru/search?q=<%=encodeURIComponent(r.colorCode)%>">
					Найти <span style="color:<%=r.colorCode%>"><%=r.title%></span> в Google
				</a>
			</div>
			<div class="description"><%=r.desc%></div>
		</div>
	<% }); %>
</div>

Можете что-нибудь посоветовать в данном случае? Не хочу пихать циклы в шаблон, когда они уже есть в js-файле...
JQuery НЕ использую - все самописное (микро), можно сказать. Шаблонизатор - немного измененный код от John Resig.
Принципиально не хочу использовать громоздкие шаблонизаторы, которые весят больше, чем все мои остальные скрипты вместе взятые, но как быть в данном случае?
Может, вы посоветуете примеры реализации этого в каком-нибудь шаблонизаторе или раскритикуете мой подход к шаблонизации в целом?

Заранее большое спасибо!

Answer 1

[Alex Zeit]

почему не использовать шаблон уже в js
особенно если использовать template string ``?

(() => {
            const data = [{
                'class': 'news-box',
                'title': 'Title 1',
                'content': 'Lorem inpsum'
            }, {
                'class': 'news-box',
                'title': 'Title 2',
                'content': 'Lorem inpsum'
            }, {
                'class': 'news-box',
                'title': 'Title 3',
                'content': 'Lorem inpsum'
            },];
            const tmpl = (data) => {
                return `<div class="${data.class}"><h2>${data.title}</h2><p>${data.content}</p></div>`
            };
            const rootApp = document.querySelector('#rootApp');
            const htmlContent = data.map(el => tmpl(el)).join('');
            rootApp.innerHTML = htmlContent;
        })();

Answer 2

[Дмитрий Клусевич]

https://learn.javascript.ru/template-lodash
https://pugjs.org/api/getting-started.html