How Can I Dynamically Assign Values to Deeply Nested JavaScript Objects Using Only a String Property Name?

Dynamic Property Assignment in JavaScript

In certain scenarios, you may encounter the need to assign a value to a property deeply nested within an object structure. However, you may only have the property name as a string. This can pose a challenge, as directly accessing the property would require traversing the entire object hierarchy.

Solution

To address this issue, we can utilize the assign() function:

function assign(obj, prop, value) {
    if (typeof prop === "string")
        prop = prop.split(".");

    if (prop.length > 1) {
        var e = prop.shift();
        assign(obj[e] =
                 Object.prototype.toString.call(obj[e]) === "[object Object]"
                 ? obj[e]
                 : {},
               prop,
               value);
    } else
        obj[prop[0]] = value;
}

Usage

Let's consider an example:

var obj = {};
var propName = "foo.bar.foobar";

assign(obj, propName, "Value");

Explanation

1. The prop is first converted into an array using the split(".") method, resulting in ["foo", "bar", "foobar"].
2. The first element of the array, foo, is assigned to obj.
3. The Object.prototype.toString.call(obj[e]) === "[object Object]" condition checks if obj.foo is an object. If true, we assign obj.foo to obj[e].
4. If obj.foo is not an object, we create a new object and assign it to obj.foo.
5. We repeat the process for bar and foobar, ultimately setting obj.foo.bar.foobar to the value passed into the assign() function.

By utilizing the assign() function, you can dynamically assign values to properties at any level of depth, even if you only have the property name as a string.

The above is the detailed content of How Can I Dynamically Assign Values to Deeply Nested JavaScript Objects Using Only a String Property Name?. For more information, please follow other related articles on the PHP Chinese website!