如何使用JSON數據填充表單

-1

我有兩個文件，一個JSON存儲一些數據和一個簡單的html表單。如何使用JSON數據填充表單

我想用從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的方式來做到這一點？

來源

2016-07-16 filippo90

你有什麼已經嘗試過這種情況？除此之外，如果它包含'users：{'那麼它不是JSON編碼的數據，而是一個JavaScript對象。因爲在JSON格式的數據中，鍵必須帶有雙引號。 –

我希望它是users =而不是users :。同時更改ID「P碼」到「PCAP」

你可以使用下面的代碼

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

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

來源

2016-07-16 11:42:59

謝謝，那個工作！ FIDDLE：https：//jsfiddle.net/hkj9nvhf/ 最後一個問題，如果json是外部文件，可以這樣做嗎？再次感謝你 – filippo90

是的。您可以通過AJAX加載JSON。 –

有非jquery（或其他框架）方式來做到這一點，但它們非常乏味（這就是爲什麼這些框架存在）。

此外：你將如何用一個ARRAY對象填充一個「單」形式？您需要重複表單或選擇您想要的數據集。

一個簡單的方法從JSON填表是https://github.com/corinis/jsForm （免責聲明：我是模塊的作者）

如果你真的想這樣做，我建議採取關閉硬盤的方式請看http://www.w3schools.com/js/js_htmldom.asp

您需要開始處理完整的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並搜索字段）也可以工作，代碼少，但只適用於非常簡單的對象。

來源

2016-07-16 11:34:52 Niko

OP說'有沒有辦法以no-jQuery的方式來做？'，但是你鏈接到一個jQuery庫。 –

謝謝你的回覆。我想要的是從數組中隨機選擇一個對象並使用數據編譯表格 – filippo90

如何使用JSON數據填充表單

回答

相關問題