如何使用JSON中的数据填充表单

How to Fill a Form with Data from a JSON

本文关键字：数据 填充 表单 何使用 JSON      更新时间：2023-09-26

我有两个文件，一个是存储一些数据的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的方式来实现这一点？

我希望是users =而不是users :。还将id"pcode"更改为"pcap"

在这种情况下，您可以使用以下代码

var indx = Math.floor(Math.random()*users.length);
var randUser = users[indx];
for(prop in randUser) {
  document.getElementById(prop).value = randUser[prop];
}

有一些非jquery（或其他框架）的方法可以做到这一点，但它们非常乏味（这就是这些框架存在的原因）。

此外：您将如何用对象数组填充"单个"表单？您要么需要重复表单，要么通过某种方式选择您想要的数据集。

从json填充表单的一种简单方法是https://github.com/corinis/jsForm（免责声明：我是该模块的作者）

如果你真的想用艰苦的方式来做，我建议你仔细看看http://www.w3schools.com/js/js_htmldom.asp

您需要开始处理完整的DOM，并确定哪些表单字段与输入匹配，并且必须担心跨浏览器的DOM实现问题。

基本上，您从获取想要开始解析的"根"开始：

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

然后有一个递归函数，它遍历所有子级及其子级，以识别一个窗体，然后可以对照对象进行检查：。

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并搜索字段）也可以，而且代码更少，但这只适用于非常简单的对象。

相关文章：