Как сгенерировать форму на JS из JSON?

Question

[Михаил]

По ходу выполнения задачи понял что нужна библиотека для генерации формы вида

<form method="post">
    <input type="hidden" name="excluded[0]" value="15">
    <input type="hidden" name="excluded[1]" value="16">
    <input type="hidden" name="excluded[2]" value="17">
    <input type="hidden" name="excluded[3]" value="18">
    <input type="hidden" name="excluded[4]" value="19">
    <input type="hidden" name="excluded[5]" value="20">
    <input type="hidden" name="excluded[6]" value="21">
    <input type="hidden" name="excluded[7]" value="22">
    <input type="hidden" name="excluded[8]" value="23">
    <input type="hidden" name="excluded[9]" value="24">
    <input type="hidden" name="excluded[10]" value="25">
    <input type="hidden" name="excluded[11]" value="26">
    <input type="hidden" name="selected[0]" value="27">
    <input type="hidden" name="total" value="1">
    <input type="hidden" name="excludeMode" value="false">
    <input type="hidden" name="params[filters][placeholder]" value="true">
    <input type="hidden" name="params[search]" value="">
    <input type="hidden" name="params[namespace]" value="sales_order_grid">
</form>

из

{
  "excluded": [
    "26",
    "25",
    "24",
    "23",
    "22",
    "21",
    "20",
    "19",
    "18",
    "17",
    "16",
    "15"
  ],
  "selected": [
    "27"
  ],
  "total": 1,
  "excludeMode": false,
  "params": {
    "filters": {
      "placeholder": true
    },
    "search": "",
    "namespace": "sales_order_grid"
  }
}

В общем, нужно перегнать массив данных в инпуты. Загуглил генерацию по данным, но там скорее генерация по схеме и это не подходит.
Есть ли какая библиотека для этого?

Comments

[Dark Hole]

Шаблонизаторы?

[Михаил]

Dark Hole: какие шаблонизаторы?

[Dark Hole]

Михаил: которые поддерживают JS и JSON. Pug, к примеру

Answer 1

[Ди Ма]

// превращаем json в объект
var obj = JSON.parse(json);

// создаем форму
var form = document.createElement('form');

// а далее по обстоятельствам.
// если количество инпутов соответствует числу элементов массива excluded,
// то в цикле перебираем массив, и добавляем элементы
for (var i = 0; i < obj.excluded.length; i++) {
    var input = document.createElement('input');

    // добавляем атрибуты 
    input.setAttribute('type', 'hidden');
    input.setAttribute('name', 'excluded[' + obj.excluded[i] + ']' );
    // ...
    // и добавляем на страницу
    form.appentChild(input);
}

element.appentChild(form);

Comments

[Михаил]

Я отмечу решением ваш ответ, но решением он является отчасти. Дело в том что набор данных динамический и хотелось бы универсального строителя.

[Ди Ма]

Михаил: Для универсального строителя в json не достаточно данных. В форме есть данные, которых нет в json, и наоборот. Единственная взаимосвязь данных и формы- это excluded, потому я на ее основе и привел пример.

[Ди Ма]

Михаил: Если у вас есть возможность изменить json, то можно было сделать универсальный сборщик по принципу:

[{
  attributes: {
    class: "foo bar",
    placeholder: "lorem"  
  }
}, {
  ...
}]
...

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

[Михаил]

Ди Ма: Я привел html как пример что должно получится. По сути нужно рекурсивно пройти по данным и собрать эти инпуты, только хотелось бы готового решения.

[Михаил]

Ди Ма: не вариант, в посте я указал что генератор для такой схемы найти не проблема, но нужно другое.

[Ди Ма]

Михаил:
Тогда может это?
darobin.github.io/formic/specs/json

[Михаил]

Ди Ма: что-то вроде того. Решение уже написал.

Answer 2

[Михаил]

Решение получилось вот такое.

var generateInputs = function(name, data, form) {
    var content = '';
    
    if (data !== null && data !== undefined) {
        if (typeof data === 'object') {
            for (var key in data) {
                if (!data.hasOwnProperty(key)) {
                    continue;
                }
                var value = data[key];

                var deedName = (!name) ? name + key : name + '[' + key + ']';
                content += generateInputs(deedName, value, form);
            }
        } else {
            // append input control at end of form
            $('<input type="hidden">')
                .attr('name', name)
                .attr('value', data)
                .appendTo(form);
            content += '<input type="hidden" name="' + name + '" value="' + data + '">';
        }
    }

    return content;
};