如何使用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数据填充表单

回答

相关问题