Transform flattened JSON data meant for forms back into its original object structure

Question

Transform flattened JSON data meant for forms back into its original object structure

My task requires me to convert specific form fields that contain "object nesting" in the field names back to the objects themselves. Here are some examples of typical form field names:

phones_0_patientPhoneTypeId
phones_0_phone
phones_1_patientPhoneTypeId
phones_1_phone

The form fields above were extracted from an object similar to the one shown below (refer to "Data"). The format of the object needs to be reconstructed. Any form field with an underscore _ character in its name should undergo this conversion. Additionally, if the segment between underscores in the form field name is numeric, it represents a JavaScript array; otherwise, it signifies an object.

I managed to come up with a basic implementation for flattening the original object for form use, but I am facing challenges with reversing the process. Below the object/data section, I have included my current attempt at achieving this. One issue with my implementation is that it does not handle array indexes correctly, which could be problematic when encoding the object as JSON, especially considering sparse arrays. For example, even if "phones_1" exists and "phones_0" does not, I still want to ensure that a slot exists for phones[0] even if the value is null.

Data:

var obj = {
  phones: [{
      "patientPhoneTypeId": 4,
      "phone": "8005551212"
    },
    {
      "patientPhoneTypeId": 2,
      "phone": "8885551212"
    }
  ]
};

Current Code:

var unflattened = {};

for (var prop in values) {
  if (prop.indexOf('_') > -1) {
    var lastUnderbarPos = prop.lastIndexOf('_');

    var nestedProp = prop.substr(lastUnderbarPos + 1);
    var nesting = prop.substr(0, lastUnderbarPos).split("_");

    var nestedRef, isArray, isObject;

    for (var i = 0, n = nesting.length; i < n; i++) {
      if (i === 0) {
        nestedRef = unflattened;
      }

      if (i < (n - 1)) { // not last
        if (/^\d+$/.test(nesting[i + 1])) {
          isArray = true;
          isObject = false;
        } else {
          isArray = true;
          isObject = false;
        }

        var currProp = nesting[i];

        if (!nestedRef[currProp]) {
          if (isArray) {
            nestedRef[currProp] = [];
          } else if (isObject) {
            nestedRef[currProp] = {};
          }
        }

        nestedRef = nestedRef[currProp];
      } else {
        nestedRef[nestedProp] = values[prop];
      }
    }
  }

javascript json forms object arrays

Answer 1

Answer №1

To simplify the understanding of array and object structures in form field names, I recommend using this naming convention:

property.<remaining>     => refers to the "property" object
property[i].<remaining>  => points to the "property" array with index "i"

With this approach, recreating the array becomes more straightforward without complex string and index manipulations. Assuming you start with an empty root object, you can implement a method named set that takes the property string as is and constructs the object regardless of its nested depth.

var object = {};

object.set = function(key, value) {
    var parts = key.split(".");
    var current = this; // starting at root
    var arrayRegex = /(\w+)\[(\d+)\]/, nameAndIndex, name, index;

    while(parts.length) {
        part = parts.shift();
        nameAndIndex = part.match(arrayRegex);
        if(nameAndIndex != null) { // if property is an array
            name = nameAndIndex[1];
            index = nameAndIndex[2];
            current[name] = current[name] || [];
            current[name][index] = current[name][index] || {};
            current = current[name][index];
        } else { // if property is an object
            current[part] = current[part] || {};
            current = current[part]; 
        }
    }

    current[part] = value;
};

This setup can handle deeply nested structures but requires an object at each level. For instance, it supports

someProperty[1].anotherProperty[2]

, not someProperty[1][2]. Also, the last item must be an object property, not an array element (e.g., x.y.z.anArray[1].lastProperty over x.y.z.lastProperty[1]). Adjustments may be needed in the set method based on specific use cases.

I've created a demo on http://jsfiddle.net/ysQpF/ showcasing these test scenarios:

object.set('phones[0].phoneType', 1);
object.set('phones[0].phone', '312-223-4929');
object.set('phones[0].details[0].areaCode', '312');
object.set('phones[0].details[0].region[0].name', 'Alaska');
object.set('phones[0].details[0].region[1].name', 'California');
object.set('phones[1].phoneType', 2);
object.set('phones[1].phone', '408-332-3011');

Answer 2

To simplify the understanding of array and object structures in form field names, I recommend using this naming convention:

property.<remaining>     => refers to the "property" object
property[i].<remaining>  => points to the "property" array with index "i"

With this approach, recreating the array becomes more straightforward without complex string and index manipulations. Assuming you start with an empty root object, you can implement a method named set that takes the property string as is and constructs the object regardless of its nested depth.

var object = {};

object.set = function(key, value) {
    var parts = key.split(".");
    var current = this; // starting at root
    var arrayRegex = /(\w+)\[(\d+)\]/, nameAndIndex, name, index;

    while(parts.length) {
        part = parts.shift();
        nameAndIndex = part.match(arrayRegex);
        if(nameAndIndex != null) { // if property is an array
            name = nameAndIndex[1];
            index = nameAndIndex[2];
            current[name] = current[name] || [];
            current[name][index] = current[name][index] || {};
            current = current[name][index];
        } else { // if property is an object
            current[part] = current[part] || {};
            current = current[part]; 
        }
    }

    current[part] = value;
};

This setup can handle deeply nested structures but requires an object at each level. For instance, it supports

someProperty[1].anotherProperty[2]

, not someProperty[1][2]. Also, the last item must be an object property, not an array element (e.g., x.y.z.anArray[1].lastProperty over x.y.z.lastProperty[1]). Adjustments may be needed in the set method based on specific use cases.

I've created a demo on http://jsfiddle.net/ysQpF/ showcasing these test scenarios:

object.set('phones[0].phoneType', 1);
object.set('phones[0].phone', '312-223-4929');
object.set('phones[0].details[0].areaCode', '312');
object.set('phones[0].details[0].region[0].name', 'Alaska');
object.set('phones[0].details[0].region[1].name', 'California');
object.set('phones[1].phoneType', 2);
object.set('phones[1].phone', '408-332-3011');

Answer 3

Answer №2

When dealing with each form field:

Example: phones_0_patientPhoneTypeId

Begin by splitting the name using _ to create an array:
```
["phones","0","patientPhoneTypeId"]
```
Reverse that array:
```
["patientPhoneTypeId","0","phones"]
```
Assign a template object to a variable, for instance o
Continue to use pop() on the array until it is empty, and for every element except the last one do o = o[resultOfPop]
For the last element, simply assign the value like so: o[resultOfPop] = valueFromField

If you choose not to utilize a template object, you will need to include an empty object or array in step 4.

Answer 4

When dealing with each form field:

Example: phones_0_patientPhoneTypeId

Begin by splitting the name using _ to create an array:
```
["phones","0","patientPhoneTypeId"]
```
Reverse that array:
```
["patientPhoneTypeId","0","phones"]
```
Assign a template object to a variable, for instance o
Continue to use pop() on the array until it is empty, and for every element except the last one do o = o[resultOfPop]
For the last element, simply assign the value like so: o[resultOfPop] = valueFromField

If you choose not to utilize a template object, you will need to include an empty object or array in step 4.

Answer 5

Answer №3

Thank you for the valuable input from others. I made some adjustments to my existing code and finally got it working, I was on the right track.

var transformedObject = {};

for (var key in data) {
    if (key.includes('_')) {
        var path = key.split("_");
        var currentKey = path.pop();

        if (!path.length || !currentKey) {
            console.log("Unable to convert form field name: '" + originalKey + "' to a 'nested' object");
            continue;
        }

        var reference, tempKey, isArr, isObj;

        for (var j = 0, length = path.length; j < length; j++) {
            if (j === length - 1) { 
                isArr = /^\d+$/.test(currentKey);
            } else {
                isArr = /^\d+$/.test(path[j + 1]);
            }
            
            isObj = !isArr;
            tempKey = path[j];

            if (j === 0) {
                reference = transformedObject;
            }

            if (!reference[tempKey]) {
                if (isArr) {
                    reference[tempKey] = [];
                } else {
                    reference[tempKey] = {};
                }
            }

            reference = reference[tempKey];

            if (j === length - 1) { 
                reference[currentKey] = data[key];
            }
        }
    }
}

Answer 6

Thank you for the valuable input from others. I made some adjustments to my existing code and finally got it working, I was on the right track.

var transformedObject = {};

for (var key in data) {
    if (key.includes('_')) {
        var path = key.split("_");
        var currentKey = path.pop();

        if (!path.length || !currentKey) {
            console.log("Unable to convert form field name: '" + originalKey + "' to a 'nested' object");
            continue;
        }

        var reference, tempKey, isArr, isObj;

        for (var j = 0, length = path.length; j < length; j++) {
            if (j === length - 1) { 
                isArr = /^\d+$/.test(currentKey);
            } else {
                isArr = /^\d+$/.test(path[j + 1]);
            }
            
            isObj = !isArr;
            tempKey = path[j];

            if (j === 0) {
                reference = transformedObject;
            }

            if (!reference[tempKey]) {
                if (isArr) {
                    reference[tempKey] = [];
                } else {
                    reference[tempKey] = {};
                }
            }

            reference = reference[tempKey];

            if (j === length - 1) { 
                reference[currentKey] = data[key];
            }
        }
    }
}

Transform flattened JSON data meant for forms back into its original object structure

Answer №1

Answer №2

Answer №3

Similar questions

A Guide on Retrieving the Initial and Final Values in a JSON Object

The Ajax login validation is not displaying

Tracking pixels for website analytics

Retrieving Parameter Values in JAX-RS Request Bodies

Disabling Express BodyParser for handling file uploads in Node.js

Manipulate target.href using jQuery when referencing an image within an anchor tag

Fetching an image from a URL using Node.js

Exploring JQuery Autocomplete and Optimizing JSON Parsing

Retrieve only the most recent input value

Cannot utilize structuredClone() on the value of the reference variable

Retrieving values from multiple nested JSON arrays while developing a Flutter application

Arranging data based on a specific field name provided for sorting purposes

Discover and transform any strings that begin with http & https into clickable links

"Utilizing JQuery to enhance task management by implementing a delete function

What is the proper way to initialize MongoDB and Express?

The text remains static and does not adjust its size when the screen is

Leverage the basename feature in React Router when rendering on the server side

Is there a way to remove the initial word from a sentence?

When using Vue computed, an error is thrown stating "Issue in rendering: 'InternalError: too much recursion'" if the same key is referenced in computed

Customizing Checkbox using CSS (additional assistance required)