How to Easily Access Nested JavaScript Objects and Arrays Using String Paths?

Accessing Nested JavaScript Objects and Arrays by String Path

Accessing deeply nested objects and arrays in JavaScript can be a cumbersome task. To simplify this, a solution has emerged that leverages a string path to directly retrieve specific values.

Pure JavaScript Solution

A pure JavaScript solution called "Object.byString()" enables the extraction of nested values using a string that follows a dot-separated path. This solution functions as follows:

Object.byString = function(o, s) {
    s = s.replace(/\[(\w+)\]/g, '.'); // convert indexes to properties
    s = s.replace(/^\./, '');           // strip a leading dot
    var a = s.split('.');
    for (var i = 0, n = a.length; i < n; ++i) {
        var k = a[i];
        if (k in o) {
            o = o[k];
        } else {
            return;
        }
    }
    return o;
}

Usage:

Object.byString(someObj, 'part3[0].name');

jQuery Solution

jQuery offers a simpler syntax for accessing nested values:

$('someObj').data('part3[0].name');

Example Usage

Consider the following object:

var someObject = {
    'part1' : {
        'name': 'Part 1',
        'size': '20',
        'qty' : '50'
    },
    'part2' : {
        'name': 'Part 2',
        'size': '15',
        'qty' : '60'
    },
    'part3' : [
        {
            'name': 'Part 3A',
            'size': '10',
            'qty' : '20'
        }, {
            'name': 'Part 3B',
            'size': '5',
            'qty' : '20'
        }, {
            'name': 'Part 3C',
            'size': '7.5',
            'qty' : '20'
        }
    ]
};

Using the provided string paths, we can access specific values as follows:

var part1name = Object.byString(someObject, 'part1.name');
var part2quantity = Object.byString(someObject, 'part2.qty');
var part3name1 = Object.byString(someObject, 'part3[0].name');

These variables will now hold the corresponding values from the nested object.

The above is the detailed content of How to Easily Access Nested JavaScript Objects and Arrays Using String Paths?. For more information, please follow other related articles on the PHP Chinese website!