How to Easily Access Nested JavaScript Objects and Arrays Using String Paths?-JS Tutorial-php.cn

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

Linda Hamilton

Release： 2024-12-23 11:56:08

Original

637 people have browsed it

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;
}

Copy after login

Usage:

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

Copy after login

jQuery Solution

jQuery offers a simpler syntax for accessing nested values:

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

Copy after login

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'
        }
    ]
};

Copy after login

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');

Copy after login

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!