Convert JSON to another JSON format with recursion JavaScript

Suppose, we have the following JSON object ?

const obj = {
    "context": {
        "device": {
            "localeCountryCode": "AX",
            "datetime": "3047-09-29T07:09:52.498Z"
        },
        "currentLocation": {
            "country": "KM",
            "lon": -78789486,
        }
    }
};

We are required to write a JavaScript recursive function that initially takes in one such object. The function should transform the above object into a "label" - "children" format, creating a hierarchical tree structure.

Therefore, the output for the above object should look like ?

const output = {
    "label": "context",
    "children": [
        {
            "label": "device",
            "children": [
                {
                    "label": "localeCountryCode"
                },
                {
                    "label": "datetime"
                }
            ]
        },
        {
            "label": "currentLocation",
            "children": [
                {
                    "label": "country"
                },
                {
                    "label": "lon"
                }
            ]
        }
    ]
}

How the Recursive Transformation Works

The recursive function checks if a value is an object. If it is, it creates a "children" array by recursively processing each property. For primitive values (strings, numbers), it creates leaf nodes with only a "label" property.

Example

const obj = {
    "context": {
        "device": {
            "localeCountryCode": "AX",
            "datetime": "3047-09-29T07:09:52.498Z"
        },
        "currentLocation": {
            "country": "KM",
            "lon": -78789486,
        }
    }
};

const transformObject = (obj = {}) => {
    if (obj && typeof obj === 'object') {
        return Object.keys(obj).map((key) => {
            let children = transformObject(obj[key]);
            return children ? {
                label: key,
                children: children
            } : {
                label: key
            };
        });
    }
    return null; // For primitive values
};

console.log(JSON.stringify(transformObject(obj), null, 2));

Output

The output in the console will be ?

[
  {
    "label": "context",
    "children": [
      {
        "label": "device",
        "children": [
          {
            "label": "localeCountryCode"
          },
          {
            "label": "datetime"
          }
        ]
      },
      {
        "label": "currentLocation",
        "children": [
          {
            "label": "country"
          },
          {
            "label": "lon"
          }
        ]
      }
    ]
  }
]

Key Points

• The function recursively processes nested objects
• Object keys become "label" values in the output
• Nested objects create "children" arrays
• Primitive values result in leaf nodes without children
• The transformation preserves the original object's structure in a tree format

Conclusion

This recursive approach effectively converts any nested JSON object into a hierarchical tree structure with "label" and "children" properties. The technique is useful for creating tree components in UI frameworks or data visualization.