Question

我有两个文件，一个存储一些数据的JSON和一个简单的html表单。

我想用从JSON中获取的随机数据填充表单。这些数据应该与同一个对象相关。

我的表单如下：

Visibility="Hidden"

我的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>

有没有办法以no-jQuery的方式这样做？

Answer 1

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

另外：你如何填补单身＆＃34;形式与对象的阵列？你需要重复表格或者选择你想要的数据集。

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

如果你真的想这么做，我建议你仔细看看http://www.w3schools.com/js/js_htmldom.asp

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

基本上你开始得到＆＃34; root＆＃34;你想要开始解析的地方：

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

Answer 2

我希望它是users =而不是users :。同时更改id＆＃39; pcode＆＃39;到＆＃39; pcap＆＃39;

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

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

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

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

2 个答案: