Генерация HTML на основе JSON и наоборот

169
14 апреля 2018, 17:33

Есть иерархическая структура полей (select,input), c возможностью для пользователя объединения и вложения их друг в друга. Иначе говоря дерево логических выражений, где каждая вершина-значение - это несколько форм ввода.

Так как это дерево необходимо сохранять в некую структуру и восстанавливать обратно (строить HTML) из неё. То посоветовали использовать JSON + какую-либо JS-библиотеку, чтобы уйти от изменений кода в случае незначительных изменений формы.

HTML выглядит следующим образом (сгенерирован для примера, из HTML удалены из лишние компоненты типа кнопок):

    <div class="conditions-group logical-or">
<div class="conditions">
    <div class="conditions-group logical-and">
        <div class="conditions">
            <div class="condition row">
                <div class="metric">
                    <select class="form-control"></select>
                </div>
                <div class="operator">
                    <select class="form-control "></select>
                </div>
                <div class="value">
                    <input value="" class="form-control">
                </div>
            </div>
            <div class="condition row">
                <div class="metric">
                    <select class="form-control"></select>
                </div>
                <div class="operator">
                    <select class="form-control "></select>
                </div>
                <div class="value">
                    <input value="" class="form-control">
                </div>
            </div>
        </div>
        <div class="condition row">
            <div class="metric">
                <select class="form-control"></select>
            </div>
            <div class="operator">
                <select class="form-control "></select>
            </div>
            <div class="value">
                <input value="" class="form-control">
            </div>
        </div>
    </div>
</div>

Блоки строятся с помощью JQuery на основе текущих.

Прошу помочь: Что поможете посоветовать для реализации такого типа задачи? Если JS-библиотека, то какая?

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

READ ALSO
Почему не подключается Jquery?

Почему не подключается Jquery?

По какой причине не подключается JQuery?

151
Bootstrap 3 - горизонтальный скролл при row внутри container

Bootstrap 3 - горизонтальный скролл при row внутри container

Использую bootstrap 3, у страницы появляется горизонтальный скроллЕсли убрать какую-то одну секцию (section) - он исчезает

170
Как сверстать круглый блок с иконками внутри?

Как сверстать круглый блок с иконками внутри?

Подскажите, пожалуйста, как сверстать такое расположение иконок? Если приглядеться, там по окружности (белый фон с несколькими кругами) расположены...

187