Вы можете использовать это: https://jocapc.github.io/jquery-view-engine/
Он связывает свойства объекта JSON в пустой шаблон HTML и сопоставляет свойства с элементами по имени, идентификатору или классу.
Во-первых, вам нужно иметь простой HTML-шаблон на своей странице:
<div id="template">
<h1 id="Name"></h1>
<label>Description:</label>
<textarea name="Desc"></textarea>
<ul>
<li class="bind-Tags"></li>
</ul>
</div>
Тогда вам нужен объект JS, который будет помещен в шаблон:
var data = { Name: "JOVN",
Desc: "The simplest view engine",
Tags: ["View engine", "JavaScript", "SPA"]
}
Наконец, просто заполните представление объектом данных:
$("div#template").view(data);
Результат:
<div id="template">
<h1 id="Name">JOVN</h1>
<label>Description:</label>
<textarea name="Desc">The simplest view engine</textarea>
<ul>
<li class="bind-Tags">View engine</li>
<li class="bind-Tags">JavaScript</li>
<li class="bind-Tags">SPA</li>
</ul>
</div>
Движок представления будет заполнять отдельные поля или дублировать элементы массива в шаблоне.