how to reduce duplicating codes.of ( document.getElementById().value = )

Question

I'm new to javascript. .I send request to server by calling ajax and get response 'data' as Map object.

Here's my code below.

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;


}

As you can see, I change the value of HTML objects with given data. So, I call document.getElementById().value multiple times. I think it seems a little messy. So, What I want to do is to reduce the duplicating codes. Is there any way to do this?

well if you replace it with something else, you are just calling a method over and over again..... — epascarello, Sep 06 '17 at 02:28
Use a loop. And [this one weird trick](https://stackoverflow.com/questions/4968406/javascript-property-access-dot-notation-vs-brackets). — Bergi, Sep 06 '17 at 02:31

score 1 · Answer 1 · answered Sep 06 '17 at 02:32

1

well you can make an array and loop...

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

but what you did is not wrong.

answered Sep 06 '17 at 02:32

epascarello

204,599
20
195
236

score 1 · Accepted Answer · answered Sep 06 '17 at 02:32

1

Depending on browser support, you can use Object.keys().

Object.keys(data)

then loop through each key with Array.forEach()

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

answered Sep 06 '17 at 02:32

Will

3,201
1
19
17

score 1 · Answer 3 · edited Sep 06 '17 at 02:46

You can loop over the data

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'/>

score 0 · Answer 4 · answered Sep 06 '17 at 02:37

You can actually do this without listing all the properties if you want all of them, and they all match the desired IDs.

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

This may seem odd, but because getElementsByTagName returns a live list, and because elements are available by their ID as properties of the list, you can do this single DOM selection and use each property of data to get each element.

Here's a live demo:

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];
}

<input id=num>
<input id=status>
<input id=product>
<input id=rate>

This *does* seem odd. Even if it works in a few browsers, why no just do it properly instead? — Bergi, Sep 06 '17 at 02:46
@Bergi: I'm fairly confident that it works in all browsers. Pretty sure this is very early DOM API. Anyway, just shaking things up a little. ;-) — spanky, Sep 06 '17 at 03:21

score 0 · Answer 5 · answered Sep 06 '17 at 02:56

You can make an array of your elements and do a loop to add the assign the value to them. I made an example for you, since I had no accessto your "data" I muck it, you can use your own data variable as long as the properties name are similar with the elements IDs :

var data = {num:1,product:1,status:1,rate:1,proceed_detail:2,schedule_detail:3,issues:2,start_date:4,end_date:3}

var myElements = ['num','product','status','rate','proceed_detail','schedule_detail','issues','start_date','end_date'];

for (var i=0; i<= myElements.length -1; i++){
   document.getElementById(myElements[i]).value = data[myElements[i]];
}

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

how to reduce duplicating codes.of ( document.getElementById().value = )

5 Answers5