Question

我是javascript的新手。 .I通过调用ajax向服务器发送请求，并将响应'data'作为Map对象。

以下是我的代码。

success: function(data){
  document.getElementById('num').value = data.num;
  document.getElementById('product').value = data.product;
  document.getElementById('status').value = data.status;
  document.getElementById('rate').value = data.rate;
  document.getElementById('proceed_detail').value = data.proceed_detail;
  document.getElementById('schedule_detail').value = data.schedule_detail;
  document.getElementById('issues').value = data.issues;
  document.getElementById('start_date').value = data.start_date;
  document.getElementById('end_date').value = data.end_date;


}

如您所见，我使用给定数据更改HTML对象的值。所以，我多次调用document.getElementById（）。value。我觉得它看起来有点乱。所以，我想要做的是减少重复代码。有没有办法做到这一点？

Answer 1

你可以做一个数组并循环...

['num', 'product', 'status'].forEach( function (key) {
  document.getElementById(key).value = data[key];
});

但你所做的并没有错。

Answer 2

根据浏览器支持，您可以使用Object.keys()。

Object.keys(data)

然后使用Array.forEach()

遍历每个键

Object.keys(data).forEach(key => document.getElementById(key).value = data[key]);

Answer 3

您可以循环数据

for (var i in data) {
  document.getElementById(i).value = data[i];
}

var data = {
  num: 1,
  product: 'Product',
  status: 'Status',
  rate: 'Rate',
  proceed_detail: 'Proceed Detail',
  schedule_detail: 'Schedule Detail',
  issues: 'Issues',
  start_date: 'Start Date',
  end_date: 'End Date'
}

for (var i in data) {
  document.getElementById(i).value = data[i];
}

<input id='num'/>
<input id='product'/>
<input id='status'/>
<input id='rate'/>
<input id='proceed_detail'/>
<input id='schedule_detail'/>
<input id='issues'/>
<input id='start_date'/>
<input id='end_date'/>

Answer 4

如果您想要所有属性，并且它们都匹配所需的ID，您实际上可以在不列出所有属性的情况下执行此操作。

success: function(data) {
  const all = document.getElementsByTagName("*");
  for (const d in data) {
    all[d].value = data[d];
  }
}

这可能看起来很奇怪，但是因为getElementsByTagName返回一个实时列表，并且因为元素可以通过它们的ID作为列表的属性来使用，所以您可以执行此单个DOM选择并使用{{1}的每个属性获取每个元素。

这是一个现场演示：

＆＃13;

data

＆＃13;

const data = {
  num: "foo",
  status: "bar",
  product: "rab",
  rate: "oof"
};

const all = document.getElementsByTagName("input");
for (const d in data) {
  all[d].value = data[d];
}

＆＃13;

Answer 5

您可以创建元素数组并执行循环以添加为其赋值。我为你做了一个例子，因为我没有访问你的＆＃34;数据＆＃34;我搞砸了，只要属性名称与元素ID类似，就可以使用自己的数据变量：

git cherry-pick -n <original commit>

https://jsfiddle.net/tfvqfarz/1/

如何减少重复的codes.of（document.getElementById（）。value =）

5 个答案: