Javascript: how to dynamically create nested objects using object names given by an array

by

Put in a function, short and fast (no recursion). 

var createNestedObject = function( base, names ) {
    for( var i = 0; i < names.length; i++ ) {
        base = base[ names[i] ] = base[ names[i] ] || {};
    }
};

// Usage:
createNestedObject( window, ["shapes", "triangle", "points"] );
// Now window.shapes.triangle.points is an empty object, ready to be used.

It skips already existing parts of the hierarchy. Useful if you are not sure whether the hierarchy was already created.

Or:

A fancier version where you can directly assign the value to the last object in the hierarchy, and you can chain function calls because it returns the last object.

// Function: createNestedObject( base, names[, value] )
//   base: the object on which to create the hierarchy
//   names: an array of strings contaning the names of the objects
//   value (optional): if given, will be the last object in the hierarchy
// Returns: the last object in the hierarchy
var createNestedObject = function( base, names, value ) {
    // If a value is given, remove the last name and keep it for later:
    var lastName = arguments.length === 3 ? names.pop() : false;

    // Walk the hierarchy, creating new objects where needed.
    // If the lastName was removed, then the last object is not set yet:
    for( var i = 0; i < names.length; i++ ) {
        base = base[ names[i] ] = base[ names[i] ] || {};
    }

    // If a value was given, set it to the last name:
    if( lastName ) base = base[ lastName ] = value;

    // Return the last object in the hierarchy:
    return base;
};

// Usages:

createNestedObject( window, ["shapes", "circle"] );
// Now window.shapes.circle is an empty object, ready to be used.

var obj = {}; // Works with any object other that window too
createNestedObject( obj, ["shapes", "rectangle", "width"], 300 );
// Now we have: obj.shapes.rectangle.width === 300

createNestedObject( obj, "shapes.rectangle.height".split('.'), 400 );
// Now we have: obj.shapes.rectangle.height === 400

Note: if your hierarchy needs to be built from values other that standard objects (ie. not {}), see also TimDog’s answer below.

Edit: uses regular loops instead of for...in loops. It’s safer in cases where a library modifies the Array prototype.

More Related Contents:

  1. Group array of object nesting some of the keys with specific names
  2. How can I access and process nested objects, arrays or JSON?
  3. Checking if a key exists in a JavaScript object?
  4. Most efficient method to groupby on an array of objects
  5. Test for existence of nested JavaScript object key
  6. Convert Array to Object
  7. How to get the difference between two arrays of objects in JavaScript
  8. What is the difference between ( for… in ) and ( for… of ) statements?
  9. Why can I add named properties to an array as if it were an object?
  10. Firestore Update single item in an array field
  11. Why does typeof array with objects return “object” and not “array”? [duplicate]
  12. How to map more than one property from an array of objects
  13. Sum JavaScript object propertyA values with the same object propertyB in an array of objects
  14. How to convert an array of objects to object with key value pairs
  15. Filter array of objects with another array of objects
  16. How to get objects value if its name contains dots?
  17. Check if object value exists within a Javascript array of objects and if not add a new object to array
  18. Convert JavaScript array of 2 element arrays into object key value pairs
  19. Perform .join on value in array of objects
  20. What’s the difference between “{}” and “[]” while declaring a JavaScript array?
  21. Count duplicates within an Array of Objects
  22. Declare an empty two-dimensional array in Javascript?
  23. Array.includes() to find object in array
  24. Find all values by specific key in a deep nested object
  25. Javascript oddness with array of objects and indexOf
  26. Filter nested array in object array by array of values
  27. Lodash create collection from duplicate object keys
  28. Best way to flatten JS object (keys and values) to a single depth array
  29. How to merge duplicates in an array of objects and sum a specific property? [duplicate]
  30. How to get all keys with values from nested objects

Leave a Comment