Ко мне часто приходят коллеги и задают простой вопрос:

Привет, у меня есть API, который возвращает объект JSON, и мне нужно показать его на веб-странице - как лучше всего это сделать?

Это кажется простым вопросом - у нас есть много фреймворков JavaScript / SPA, которые могут это сделать. Но эти ребята - классические разработчики полного стека, работающие с небольшим количеством HTML, JavaScript, C # / Java, SQL, у них есть классические веб-приложения с REST API, и они хотят отображать некоторые данные на странице. Не более того. Знакомство с Angular, React, синтаксисом шаблонов, настройка SPA, изучение того, как они могут переносить / модернизировать свои приложения, - это просто накладные расходы.

Проблема

Дело в том, что существует большое количество разработчиков, которым просто нужен простой способ взять JSON и показать его. Они не хотят переписывать все приложение и переходить на SPA только для одной таблицы, которую им нужно заполнить сегодня. Никаких фреймворков, никакой перестройки архитектуры в SPA, им просто нужно несколько строк кода, чтобы завершить свою задачу.

По-видимому, нет встроенной функции, которая помещала бы объект JSON / JavaScript в HTML. Библиотека JQuery может устанавливать HTML или атрибуты узлов, но нет встроенной функции, загружающей JSON в HTML. Есть несколько движков шаблонов / представлений, но у них есть собственный синтаксис, и это не то, что вы бы поместили в обработчик запроса AJAX.

Итак, вопрос в том, как взять объект JSON, полученный из вызова AJAX, и отобразить его в элементе HTML?

Решение - JQuery View Engine

Когда кто-то задает такой вопрос, я рекомендую следовать JQuery View Engine. Это небольшая библиотека, которая берет объект JavaScript, представляющий модель, и помещает его в представление HTML:

var model = {
 Name: "JavaScript View Engine",
 Desc: "The simplest view engine",
 Tags: ["View engine", "JavaScript", "SPA"]
};
$("div#template").view(model);

«Просмотр» - это простой HTML:

<div id="template">
    <h1 id="Name"></h1>
    <label>Description:</label>
    <textarea name="Desc"></textarea>
    <ul>
      <li class="bind-Tags"></li>
    </ul>
</div>

Для шаблонов нет специального синтаксиса - просто напишите классический HTML-код или скопируйте его из какого-нибудь образца, такого как JQuery UI или Twitter Bootstrap, и поместите на страницу.

Результат привязки показан в следующем коде:

<div id="template">
<h1 id="Name">JavaScript View Engine</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>

Этот простой движок просмотра будет брать свойства из JSON и просто вставлять их в нужные места в шаблоне - что может быть проще?

Единственное, что необходимо сделать, - это отметить, какие элементы HTML в шаблоне должны соответствовать свойствам объекта JavaScript. Вы можете установить HTML-атрибуты id или name в целевых элементах, которые соответствуют именам свойств в объекте JavaScript, или классы CSS с префиксом «bind-» для элементов, которые должны быть целями для некоторых областей. Затем функция view () сопоставит свойства объекта JSON с элементами HTML с идентификатором, атрибутами имени или классами «bind-» по имени и поместит значения из объекта в элементы HTML, отмеченные классами.

Речь идет не только о сопоставлении - этот JQuery View Engine имеет встроенные правила, которые могут автоматически определять, как заполнять элементы шаблона в зависимости от типа:

  1. Если HTML-элемент является простым узлом (‹h1›, ‹DIV›, ‹SPAN›), он будет принимать значение из объекта JSON и помещать его как содержимое элемента.
  2. Если HTML-элемент является элементом формы, он будет устанавливать значение, внутренний текст, проверять его, в зависимости от типа элемента.
  3. Если HTML-элемент является коллекцией (‹SELECT›, ‹TABLE›, ‹UL›), а объект - массивом, он автоматически клонирует элементы для каждого объекта в массиве.

Это чрезвычайно простой способ привязать ответы AJAX API к телу веб-страницы:

$.ajax({url:"api/region.js"})
  .done(function(response){
          $("#template").view(response);
});

Итак, если у вас нет и / или вы не хотите иметь полноценный SPA, использование облегченной библиотеки, такой как эта, является практическим способом добиться цели.

JQuery View Engine - это небольшая бесплатная библиотека с открытым исходным кодом, которая может сэкономить ваше время. Если у вас такая же проблема, и вы думаете, что это поможет, попробуйте.