Zugriff auf verschachtelte JavaScript-Objekte und -Arrays über einen String-Pfad

Question

Ich habe eine Datenstruktur wie diese:

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

Und ich möchte mit diesen Variablen auf die Daten zugreifen:

var part1name = "part1.name";
var part2quantity = "part2.qty";
var part3name1 = "part3[0].name";

part1name sollte gefüllt werden mit someObject.part1.name Wert, der "Teil 1" ist. Dasselbe gilt für part2quantity, das mit 60 gefüllt ist.

Gibt es irgendwie zu erreichen dies entweder mit reinen Javascript oder JQuery?

Answer 1

Ich habe dies auf der Grundlage eines ähnlichen Codes gemacht, den ich bereits hatte, und es scheint zu funktionieren:

Object.byString = function(o, s) {
    s = s.replace(/\[(\w+)\]/g, '.$1'); // 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;
}

Verwendung::

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

Sehen Sie eine funktionierende Demo unter http://jsfiddle.net/alnitak/hEsys/

EDIT einige haben bemerkt, dass dieser Code einen Fehler auslöst, wenn eine Zeichenkette übergeben wird, bei der die äußersten linken Indizes nicht einem korrekt verschachtelten Eintrag innerhalb des Objekts entsprechen. Dies ist ein berechtigtes Anliegen, das aber IMHO am besten mit einer try / catch beim Aufruf blockieren, anstatt diese Funktion stillschweigend zurückkehren zu lassen undefined für einen ungültigen Index.

Answer 2

Dies wird nun von lodash unterstützt durch _.get(obj, property) . Siehe https://lodash.com/docs#get

Beispiel aus der Dokumentation:

var object = { 'a': [{ 'b': { 'c': 3 } }] };

_.get(object, 'a[0].b.c');
//  3

_.get(object, ['a', '0', 'b', 'c']);
//  3

_.get(object, 'a.b.c', 'default');
//  'default'

Answer 3

Dies ist die Lösung, die ich verwende:

function resolve(path, obj=self, separator='.') {
    var properties = Array.isArray(path) ? path : path.split(separator)
    return properties.reduce((prev, curr) => prev?.[curr], obj)
}

Beispiel für die Verwendung:

// accessing property path on global scope
resolve("document.body.style.width")
// or
resolve("style.width", document.body)

// accessing array indexes
// (someObject has been defined in the question)
resolve("part3.0.size", someObject) // returns '10'

// accessing non-existent properties
// returns undefined when intermediate properties are not defined:
resolve('properties.that.do.not.exist', {hello:'world'})

// accessing properties with unusual keys by changing the separator
var obj = { object: { 'a.property.name.with.periods': 42 } }
resolve('object->a.property.name.with.periods', obj, '->') // returns 42

// accessing properties with unusual keys by passing a property name array
resolve(['object', 'a.property.name.with.periods'], obj) // returns 42

Beschränkungen:

• Klammern können nicht verwendet werden ( [] ) für Array-Indizes - obwohl die Angabe von Array-Indizes zwischen dem Trennzeichen (z. B., . ) funktioniert wie oben gezeigt einwandfrei.

Answer 4

ES6 : Nur eine Zeile in Vanila JS (sie gibt null zurück, wenn sie nicht gefunden wird, anstatt einen Fehler zu melden):

'path.string'.split('.').reduce((p,c)=>p&&p[c]||null, MyOBJ)

Oder ein Beispiel:

'a.b.c'.split('.').reduce((p,c)=>p&&p[c]||null, {a:{b:{c:1}}})

Mit optionalem Verkettungsoperator :

'a.b.c'.split('.').reduce((p,c)=>p?.[c], {a:{b:{c:1}}})

Für eine einsatzbereite Funktion, die auch false, 0 und negative Zahlen erkennt und Standardwerte als Parameter akzeptiert:

const resolvePath = (object, path, defaultValue) => path
   .split('.')
   .reduce((o, p) => o ? o[p] : defaultValue, object)

Beispiel zur Verwendung:

resolvePath(window,'document.body') => <body>
resolvePath(window,'document.body.xyz') => undefined
resolvePath(window,'document.body.xyz', null) => null
resolvePath(window,'document.body.xyz', 1) => 1

Bonus :

An einstellen. einen Pfad (erbeten von @rob-gordon), den Sie verwenden können:

const setPath = (object, path, value) => path
   .split('.')
   .reduce((o,p,i) => o[p] = path.split('.').length === ++i ? value : o[p] || {}, object)

Beispiel:

let myVar = {}
setPath(myVar, 'a.b.c', 42) => 42
console.log(myVar) => {a: {b: {c: 42}}}

Zugriff auf Array mit [] :

const resolvePath = (object, path, defaultValue) => path
   .split(/[\.\[\]\'\"]/)
   .filter(p => p)
   .reduce((o, p) => o ? o[p] : defaultValue, object)

Beispiel:

const myVar = {a:{b:[{c:1}]}}
resolvePath(myVar,'a.b[0].c') => 1
resolvePath(myVar,'a["b"][\'0\'].c') => 1

Answer 5

Sie müssen die Zeichenfolge selbst analysieren:

function getProperty(obj, prop) {
    var parts = prop.split('.');

    if (Array.isArray(parts)) {
        var last = parts.pop(),
        l = parts.length,
        i = 1,
        current = parts[0];

        while((obj = obj[current]) && i < l) {
            current = parts[i];
            i++;
        }

        if(obj) {
            return obj[last];
        }
    } else {
        throw 'parts is not valid array';
    }
}

Dies erforderte, dass Sie auch Array-Indizes in Punktschreibweise definieren:

var part3name1 = "part3.0.name";

Das macht das Parsing einfacher.

DEMO