JSONからデータをフォームに入力する方法

Question

私は2つのファイル、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 =と思っています。また、あなたがすでにやってみたが何次のコード

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（または他のフレームワーク）方法がありますが、これらは非常に退屈です（なぜこれらのフレームワークが存在するのか）。

さらに、オブジェクトのARRAYを使用して「単一の」フォームを作成するにはどうすればよいですか？フォームを繰り返すか、必要なデータセットを選択する何らかの方法が必要です。

JSONからフォームを記入する簡単な方法は、https://github.com/corinis/jsForm （免責事項：私はそのモジュールの作者午前）であるあなたが本当にそれを私が近くを取ることをお勧めハードな方法をしたい場合は

---

あなたは完全なDOMの処理を開始し、どのフォームフィールドが入力と一致するかを特定し、クロスブラウザ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")]); 
    } 
    } 
} 

コードを拡張して、オブジェクト内のサブオブジェクトまたは他の特性をも可能にすることができます。

もう一方の方法（オブジェクト内のfor-inを実行してフィールドを検索する）は機能し、コードは少なくなりますが、これは非常に単純なオブジェクトに対してのみ機能します。