Как заполнить форму данными из JSON

Question

У меня есть два файла: JSON, хранящий некоторые данные и простую форму html.

Я хочу заполнить форму случайными данными, взятыми из JSON. Эти данные должны относиться к одному и тому же объекту.

Моя форма выглядит следующим образом:

<form id="first_form"> 
    Name:<br> 
    <input id="name" type="text" name="name"> 
    <br> 
    Phone:<br> 
    <input id="phone" type="number" name="phone"> 
    <br> 
    City:<br> 
    <input id="city" type="text" name="city"> 
    <br> 
    Pcode:<br> 
    <input id="pcode" type="number" name="pcode"> 
    Note:<br> 
    <input id="note" type="text" name="note"> 
    <br> 
</form> 

Моя JSON выглядит следующим образом:

users: [ 
{ 
    "name": "name1", 
    "phone": "111111111", 
    "address": "address1", 
    "city": "city1", 
    "pcap": 1111, 
    "note": "" 
}, 
{ 
    "name": "name2", 
    "phone": "222222222", 
    "address": "address2", 
    "city": "city2", 
    "pcap": 2222, 
    "note": "" 
}, 
{ 
    "name": "name3", 
    "phone": "333333333", 
    "address": "address3", 
    "city": "city3", 
    "pcap": 3333, 
    "note": "" 
}, 
{ 
    "name": "name4", 
    "phone": "44444444", 
    "address": "address4", 
    "city": "city4", 
    "pcap": 4444, 
    "note": "" 
} 
] 

Есть ли способ сделать это таким образом, нет-JQuery?

Answer 1

Я надеюсь, это users =, а не users :. Кроме того, измените идентификатор «PCODE» к «» PCAP

В этом случае вы можете использовать следующий код

var indx = Math.floor(Math.random()*users.length); 
var randUser = users[indx]; 

for(prop in randUser) { 
    document.getElementById(prop).value = randUser[prop]; 
} 

Answer 2

Существуют не-jquery (или другие рамки) способы сделать это, но они довольно утомительны (вот почему эти рамки существуют).

Кроме того, как бы вы заполнили «единую» форму с массивом объектов? вам нужно будет либо повторить форму, либо выбрать способ выбора нужного набора данных.

Один простой способ заполнить форму из JSON является https://github.com/corinis/jsForm (отказ от ответственности: я являюсь автором этого модуля)

---

Если вы действительно хотите сделать это трудный путь, я предлагаю вам внимательно Посмотрите на http://www.w3schools.com/js/js_htmldom.asp

Вам необходимо приступить к обработке полной DOM и определить, какие формы-поля соответствуют входным данным, и вам нужно беспокоиться о проблемах с перекрестным браузером.

В основном вы начинаете с получением «корень», где вы хотите начать разбор:

var root = document.getElementById("first_form"); 

и затем рекурсивную функцию, которая проходит через все дети и его childrent определить форму, которую вы можете затем проверьте свой объект :.

function replace(root, obj) { 
    var children = root.childNodes; 
    for(var i = 0; i < children.lenght; i++) { 
    var child = children[i]; 
    // go deep 
    if(child.children) { 
     replace(child, obj); 
    } 
    // check if we have a name attribute - then assume its a form and set its value 
    if(child.getAttribute("name")) { 
     child.setAttribute("value", obj[child.getAttribute("name")]); 
    } 
    } 
} 

Вы можете расширить код, чтобы также разрешить под-объекты или другие особенности в вашем объекте.

Идет другим путем (выполняется для входа в объект и ищет поля) также работает и меньше кода, но работает только для очень простых объектов.