M
M
Michael2017-07-12 19:57:34
JavaScript
Michael, 2017-07-12 19:57:34

How to generate JS form from JSON?

In the course of the task, I realized that I needed a library to generate the form of the form

<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>


from
{
  "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"
  }
}


In general, you need to overtake the data array into inputs. Googled the generation according to the data, but there is more likely a generation according to the scheme and this does not fit.
Is there any library for this?

Answer the question

In order to leave comments, you need to log in

1 answer(s)
D
Di Ma, 2017-07-12
@springimport

// превращаем 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);

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question