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

我有两个文件，一个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>

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的方法可以做到这一点？

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

此外：您将如何用对象数组填充“单个”表单？您可能需要重复表单，也可能需要某种方法来选择所需的数据集

从json填充表单的一种简单方法是 （免责声明：我是该模块的作者）

---

如果你真的想这么做，我建议你仔细看看

您需要开始处理完整的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")]);
     }
  }
}

功能替换（根目录，obj）{
var children=root.childNodes；
对于（变量i=0；i

您可以扩展代码以允许对象中的子对象或其他特性

---

反过来说（在对象中执行for-in并搜索字段）同样有效，代码更少，但这只适用于非常简单的对象。

我希望是

用户=

而不是

用户：

。同时将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];
}

---

你已经试过什么了？除此之外，如果它包含

用户：{

那么它不是JSON编码的数据，而是一个JavaScript对象。因为在JSON格式的数据中，键必须有双引号。OP说

有没有一种无jQuery的方法可以做到这一点？

，但是你链接到一个jQuery库。谢谢你的回复。我想要的是从数组中随机选择一个对象，并使用数据编译最后一个问题，如果json是一个外部文件，是否可以这样做？再次感谢。是的。您可以通过AJAX加载json。