A quicker way to update lots of values

Question

Im updating many fields using ajax. My server is getting a row from the database then I am JSON encoding the row and sending this as my xmlhttp.responseText.

The response text is of the form

 {"JobCardNum":5063,"IssueTo":"MachineShop","Priority":"High" ...lots of data}

In the browser I then JSON parse the response text and then begin the long process of updating the values like so:

 var obj = JSON.parse(info);
            document.getElementById("JobCardNum").value = obj.JobCardNum;
            document.getElementById("IssueTo").value = obj.IssueTo;
            document.getElementById("MachineShop").value = obj.MachineShop; 
....... lots of similar statements

As the element id matches the column names I though there might be a way to loop through my JavaScript object and set all my values. Any Ideas?

Are u looking for a way to loop javascript object? [This question](http://stackoverflow.com/questions/684672/how-do-i-loop-through-or-enumerate-a-javascript-object) may be of some help. — MMhunter, Jul 09 '16 at 08:17

Shlomi Haver · Answer 1 · 2016-07-09T08:59:35.003

2

This code should iterate over your json object and update the values.

for (var key in p) {
  if (p.hasOwnProperty(key)) {
    var el = document.getElementById(key);
    if(el) el.value = p[key];
  }
}

edited Jul 09 '16 at 08:59

answered Jul 09 '16 at 08:15

Shlomi Haver

954
9
14

Just for safechecking, we should check if the element exists first, but it was almost the same code I was about to post. :) – NoLifeKing Jul 09 '16 at 08:18
Im getting this: TypeError: null is not an object (evaluating 'document.getElementById(key).value = p[key]') – Connor Bishop Jul 09 '16 at 08:32
And its only updating the first value – Connor Bishop Jul 09 '16 at 08:33

score 1 · Accepted Answer · answered Jul 09 '16 at 08:23

1

The solution using Object.keys and Array.forEach functions:

var obj = JSON.parse(info);

Object.keys(obj).forEach(function(id){
    var el = document.getElementById(id);
    if (el) el.value = obj[id];
});

answered Jul 09 '16 at 08:23

RomanPerekhrest

88,541
4
65
105

Is there an equivalent of this for php, i.e after retiring a row from a database can we then set aload of variables, named with the names of the columns – Connor Bishop Jul 09 '16 at 10:09
if it's about PHP: create new question with `php` tag and let me know, I'll help – RomanPerekhrest Jul 09 '16 at 10:19

A quicker way to update lots of values

2 Answers2