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

How to make an Ajax "POST" request to the server using jQuery or AngularJS without sending any parameter data

"Preventing the propagation of a click event on an anchor tag with

Transform the characters within a string into corresponding numerical values, calculate the total sum, and finally display both the sum and the original string

Adjusting the size of images in a Bootstrap lightbox gallery

Nested pages are causing jQuery plugins to malfunction

I am curious if there is a wysiwyg web editor extension specifically designed for VS2010 available?

How to Extract a URL from an Anchor Tag without an HREF Attribute Using Selenium

What is the best way to sort through data if I enter more than three characters to filter the results?

Tips for effectively passing navigation as props in React Navigation with Expo

Sending an image file using AJAX and jQuery

Creating Unique Names for DataMembers in WCF Generics

Some browsers are experiencing issues with Javascript functionality

A method for performing precise division on numbers in JavaScript, allowing for a specific precision level (such as 28 decimal places)

Utilization of JSON and XML formats in web API for handling requests and responses

Unusual JavaScript Bug: Uncaught TypeError - Unable to access property 'url' of null

The challenge of maintaining coherence in AngularJS scopes

How to implement setState within a Promise function using useEffect in React functional components with hooks?

Error occurs while attempting to return a JSON record using an Ajax request

Finding the measurement of a sofa using couch.get(data, headers, status)

"Patience is key when it comes to waiting for an HTTP response