Updating a multitude of values efficiently

Question

Updating a multitude of values efficiently

When updating multiple fields using ajax, I retrieve a row from the database on my server, JSON encode the row, and send it as the xmlhttp.responseText.

The format of the response text is as follows:

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

After parsing the response text in the browser, I start the process of updating values like this:

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

Since the element id matches the column names, I wondered if there was a way to loop through my JavaScript object and set all the values. Any suggestions?

javascript json ajax

Answer 1

Answer №1

The following code snippet can be used to loop through a JSON object and update its values dynamically.

for (let property in data) {
  if (data.hasOwnProperty(property)) {
    let element = document.getElementById(property);
    if(element) {
      element.value = data[property];
    }
  }
}

Answer 2

The following code snippet can be used to loop through a JSON object and update its values dynamically.

for (let property in data) {
  if (data.hasOwnProperty(property)) {
    let element = document.getElementById(property);
    if(element) {
      element.value = data[property];
    }
  }
}

Answer 3

Answer №2

Here is how you can solve the problem by utilizing the Object.keys and Array.forEach methods:

let data = JSON.parse(information);

Object.keys(data).forEach(function(key){
    let element = document.getElementById(key);
    if (element) element.value = data[key];
});

Answer 4

Here is how you can solve the problem by utilizing the Object.keys and Array.forEach methods:

let data = JSON.parse(information);

Object.keys(data).forEach(function(key){
    let element = document.getElementById(key);
    if (element) element.value = data[key];
});

Updating a multitude of values efficiently

Answer №1

Answer №2

Similar questions

AWS Cognito - ECS Task Fails to Start

Tips for setting the textfield value in JSP using Javascript

"Exploring the Dynamic Display of Ajax with HTML5 Canvas

Functionality of click events disabled upon loading of ajax content

The destination you are trying to reach through a POST request at this time is unavailable

Check out how to utilize the jQuery .ajax Post method in a function

What is the best approach to accumulate model data in an Angular JS service or controller through a series of consecutive calls?

Refreshing the page when the hide/show button is clicked with jQuery

`Assemble: Store the newly created Stripe "Client Identity" in a designated container`

The Jquery calculation feature sometimes mistakenly adds an incorrect value before calculating the correct value

Transforming MySQL data into JSON format for a URL

What is the best way to suppress a warning message following an AJAX request?

What could be the reason for the malfunction of Bootstrap Js in my template?

Using an Ajax Post request to trigger a JavaScript function

What do you want to know about Angular JS $http request?

Pass data to PHP using AJAX

CSS styling failing to meet desired expectations

Looking to iterate through a dataframe and transform each row into a JSON object?

What could be causing the issue where only one of my videos plays when hovered over using UseRef?

Can a table with a checkered pattern be created in Ember.js with just Handlebars and ember-composable-helpers?