Retrieve the value of a nested JSON object using the name of an HTML form field, without the use of eval

Question

Retrieve the value of a nested JSON object using the name of an HTML form field, without the use of eval

I am facing a similar issue to Convert an HTML form field to a JSON object with inner objects, but in the opposite direction.

Here is the JSON Object response received from the server:

{
    company : "ACME, INC.",
    contact : {
        firstname : "Daffy", 
        lastname : "Duck"
    }
}

Below is the structure of the HTML form:

<form id="myform">
    Company: <input type="text" name="company" />
    First Name: <input type="text" name="contact.firstname" />
    Last Name: <input type="text" name="contact.lastname" />
</form>

This is the (pseudo)code currently being used:

var formFields; 

for (var i = 0, iMax = formFields.length; i < iMax; i++) {

    var fieldName = formFields[i].getAttribute('name');
    eval("fieldValue = responseObject."+fieldName);

}

Although my solution works, I am seeking a method to eliminate using eval. Furthermore, the solution should be able to handle form fields with multiple dots in the field name.

javascript json object eval forms

Answer 1

Answer №1

Instead of:

eval("sFieldValue = oResponse."+sFieldName);

For singular dotted fields, you can use:

sFieldValue = oResponse[sFieldName];

This method retrieves the value using its key.

If you require more complex actions, follow these steps:

Split sFieldName at each occurrence of .
Iterate over the array and navigate within oResponse until you find the desired value

A sample code implementation is as follows:

var node = oResponse, parts = sFieldName.split('.');
while(parts.length > 0) {
   node = node[parts.shift()];
}
// The variable 'node' now contains the desired value

For more insights on "Member Operators":
https://developer.mozilla.org/en/JavaScript/Reference/Operators/Member_Operators

Answer 2

Instead of:

eval("sFieldValue = oResponse."+sFieldName);

For singular dotted fields, you can use:

sFieldValue = oResponse[sFieldName];

This method retrieves the value using its key.

If you require more complex actions, follow these steps:

Split sFieldName at each occurrence of .
Iterate over the array and navigate within oResponse until you find the desired value

A sample code implementation is as follows:

var node = oResponse, parts = sFieldName.split('.');
while(parts.length > 0) {
   node = node[parts.shift()];
}
// The variable 'node' now contains the desired value

For more insights on "Member Operators":
https://developer.mozilla.org/en/JavaScript/Reference/Operators/Member_Operators

Answer 3

Answer №2

To effectively handle a single property, you can use the following code snippet:

sFieldValue = oResponse[sFieldName]

However, when dealing with nested data like contact.firstname, you need to split the name by dots and iterate through each part using a loop:

var aFormFields; 

for (var i = 0, iMax = aFormFields.length; i < iMax; i++) {

    var aFieldNameParts = aFormFields[i].getAttribute('name').split(".");
    var oFieldValue = oResponse;
    for(var j=0; j<aFieldNameParts.length; j++) {
        oFieldValue = oFieldValue[aFieldNameParts[j]];
    }
    var sFieldValue = oFieldValue;
}

Keep in mind that if a property doesn't exist, an error will be thrown. It's advisable to verify the existence of

oFieldValue[ aFieldNameParts[j] ]

before accessing it.

Answer 4

To effectively handle a single property, you can use the following code snippet:

sFieldValue = oResponse[sFieldName]

However, when dealing with nested data like contact.firstname, you need to split the name by dots and iterate through each part using a loop:

var aFormFields; 

for (var i = 0, iMax = aFormFields.length; i < iMax; i++) {

    var aFieldNameParts = aFormFields[i].getAttribute('name').split(".");
    var oFieldValue = oResponse;
    for(var j=0; j<aFieldNameParts.length; j++) {
        oFieldValue = oFieldValue[aFieldNameParts[j]];
    }
    var sFieldValue = oFieldValue;
}

Keep in mind that if a property doesn't exist, an error will be thrown. It's advisable to verify the existence of

oFieldValue[ aFieldNameParts[j] ]

before accessing it.

Answer 5

Answer №3

Instead of iterating over the input fields, a more efficient approach would be to loop through the JSON object directly:

function populateForm(form, jsonData, namespace) {
  namespace = namespace ? namespace + "." : "";
  for (var key in jsonData) {
    if (typeof jsonData[key] === "string") {
      var inputField = form.elements[namespace + key];
      if (inputField)
        inputField.value = jsonData[key];
    } else
      populateForm(form, jsonData[key], namespace + key);
  }
}

populateForm(document.getElementById("myform"), responseObject);

(not tested yet)

Answer 6

Instead of iterating over the input fields, a more efficient approach would be to loop through the JSON object directly:

function populateForm(form, jsonData, namespace) {
  namespace = namespace ? namespace + "." : "";
  for (var key in jsonData) {
    if (typeof jsonData[key] === "string") {
      var inputField = form.elements[namespace + key];
      if (inputField)
        inputField.value = jsonData[key];
    } else
      populateForm(form, jsonData[key], namespace + key);
  }
}

populateForm(document.getElementById("myform"), responseObject);

(not tested yet)

Answer 7

Answer №4

If your naming convention is consistent, you can transform the dot-notation into subscripts. Start by breaking down the field name with periods and then iterate or use recursion to convert each token into a subscript. Keep in mind that this method assumes that oResponse has a value for every field.

for (var i = 0; i < aFormFields.length; i++) {
    var sFieldName = aFormFields[i].getAttribute('name');
    var tokens = sFieldName.split('.');
    var cur = oResponse;

    for (var j = 0; j < tokens.length; j++) {
        cur = cur[tokens[j]];
    }

    sFieldValue = cur;
}

Answer 8

If your naming convention is consistent, you can transform the dot-notation into subscripts. Start by breaking down the field name with periods and then iterate or use recursion to convert each token into a subscript. Keep in mind that this method assumes that oResponse has a value for every field.

for (var i = 0; i < aFormFields.length; i++) {
    var sFieldName = aFormFields[i].getAttribute('name');
    var tokens = sFieldName.split('.');
    var cur = oResponse;

    for (var j = 0; j < tokens.length; j++) {
        cur = cur[tokens[j]];
    }

    sFieldValue = cur;
}

Answer 9

Answer №5

Consider this as a fusion of an answer and a question :)

At the moment, I am in the process of configuring my server to convert the data received from a form into JSON format, just like you...

In my scenario, the form will ultimately generate a JSON object with multiple subobjects that can have their own subobjects, leading to potential infinite recursion.

The current "solution" that I'm using feels somewhat off, but it does get the job done. The getRequestBody function takes input from req.body object in express.js, which essentially follows this structure:

{
  "ridic-ulously-deep-subobject": "value",
  "ridic-ulously-deep-subobject2": "value",
  "ridic-ulously-deep2-subobject3": "value"
}

The HTML code being utilized is:

<form>
    <input name="ridic-ulously-long-class-string" value="my value" />
  </form>

And here's the JavaScript function (designed to be generic - simply supply it with a req.body object like the one above and it should return a JSON object):

function getRequestBody(reqB){

  var reqBody = {};

  for(var keys in reqB) {

    var keyArr = keys.split('-');

    switch(keyArr.length){
      case 1:
        if(!reqBody[keyArr[0]]) reqBody[keyArr[0]] = {};
        reqBody[keyArr[0]] = reqB[keys];
      break;

      case 2:
        if(!reqBody[keyArr[0]]) reqBody[keyArr[0]] = {};
        if(!reqBody[keyArr[0]][keyArr[1]]) reqBody[keyArr[0]][keyArr[1]] = {};

        reqBody[keyArr[0]][keyArr[1]] = reqB[keys];
      break;

      case 3:
        if(!reqBody[keyArr[0]]) reqBody[keyArr[0]] = {};
        if(!reqBody[keyArr[0]][keyArr[1]]) reqBody[keyArr[0]][keyArr[1]] = {};
        if(!reqBody[keyArr[0]][keyArr[1]][keyArr[2]]) reqBody[keyArr[0]][keyArr[1]][keyArr[2]] = {};

        reqBody[keyArr[0]][keyArr[1]][keyArr[2]] = reqB[keys];
      break;

      case 4:

      // ...
      //and so on, always one line longer
  }

    return reqBody;
}

Although this solution covers only 5 levels of subobjects currently, there may be instances where applications require reaching seven or even ten levels. It seems like a common predicament, yet my search yielded no results within a 10-minute span, hinting at possible missing keywords or absence of a suitable solution [as of now].

Is there someone out there with enough creativity and logic to streamline this complexity, or will I have to add further clutter to accommodate up to 10 sublevels?

I believe that the performance impact might not be significant in the end, but I genuinely prefer steering clear of creating such a monstrous function :D

Enjoy experimenting!

Jascha

Answer 10

Consider this as a fusion of an answer and a question :)

At the moment, I am in the process of configuring my server to convert the data received from a form into JSON format, just like you...

In my scenario, the form will ultimately generate a JSON object with multiple subobjects that can have their own subobjects, leading to potential infinite recursion.

The current "solution" that I'm using feels somewhat off, but it does get the job done. The getRequestBody function takes input from req.body object in express.js, which essentially follows this structure:

{
  "ridic-ulously-deep-subobject": "value",
  "ridic-ulously-deep-subobject2": "value",
  "ridic-ulously-deep2-subobject3": "value"
}

The HTML code being utilized is:

<form>
    <input name="ridic-ulously-long-class-string" value="my value" />
  </form>

And here's the JavaScript function (designed to be generic - simply supply it with a req.body object like the one above and it should return a JSON object):

function getRequestBody(reqB){

  var reqBody = {};

  for(var keys in reqB) {

    var keyArr = keys.split('-');

    switch(keyArr.length){
      case 1:
        if(!reqBody[keyArr[0]]) reqBody[keyArr[0]] = {};
        reqBody[keyArr[0]] = reqB[keys];
      break;

      case 2:
        if(!reqBody[keyArr[0]]) reqBody[keyArr[0]] = {};
        if(!reqBody[keyArr[0]][keyArr[1]]) reqBody[keyArr[0]][keyArr[1]] = {};

        reqBody[keyArr[0]][keyArr[1]] = reqB[keys];
      break;

      case 3:
        if(!reqBody[keyArr[0]]) reqBody[keyArr[0]] = {};
        if(!reqBody[keyArr[0]][keyArr[1]]) reqBody[keyArr[0]][keyArr[1]] = {};
        if(!reqBody[keyArr[0]][keyArr[1]][keyArr[2]]) reqBody[keyArr[0]][keyArr[1]][keyArr[2]] = {};

        reqBody[keyArr[0]][keyArr[1]][keyArr[2]] = reqB[keys];
      break;

      case 4:

      // ...
      //and so on, always one line longer
  }

    return reqBody;
}

Although this solution covers only 5 levels of subobjects currently, there may be instances where applications require reaching seven or even ten levels. It seems like a common predicament, yet my search yielded no results within a 10-minute span, hinting at possible missing keywords or absence of a suitable solution [as of now].

Is there someone out there with enough creativity and logic to streamline this complexity, or will I have to add further clutter to accommodate up to 10 sublevels?

I believe that the performance impact might not be significant in the end, but I genuinely prefer steering clear of creating such a monstrous function :D

Enjoy experimenting!

Jascha

Retrieve the value of a nested JSON object using the name of an HTML form field, without the use of eval

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Creating a Drop-Down Button Using HTML, CSS, and JavaScript

The server encountered an unexpected error while processing the request, possibly due to a

Validating Responses in RESTful APIs

Exploring the world of Node.js and the power of 64-bit var

Using Ajax and JSON to fetch data and create multiple divs based on the number of notes retrieved from a database (using PHP and SQL)

Exploring nested objects within Vue components

JavaScript Click Event Not Functioning

What is the best way to extract information from a Django database and save it in a JSON file on my personal computer

Tips for inserting a property into an array of objects when it matches the specified ID

"Using Vue 3 to teleport content to a specific element and swap out existing

Updating class after refresh of ng-repeat in AngularJS/Javascript

"Notification: The marker element has been eliminated" encountered while attempting to restore text ranges using Rangy within a Vue component

The Node.js JSON string displays as "[object Object]" in the output

Field for user input along with a pair of interactive buttons

My Node.Js app refuses to run using my computer's IP address, yet works perfectly with localhost

Facilitating JSON functionality with Jersey and Grizzly

Is it possible to dynamically load JSON files using fetch after a component has been mounted in React?

Restrict page scrolling to the vertical position of a specified div [Using jQuery, javascript, and HTML]

Issue with Vue.js where the v-if directive placed inside a v-for loop does not properly update when

Creating a constant in an AngularJS module: The definitive guide to defining module-specific constants