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

Basierend auf Alnitak's respuesta .

Ich habe das Polyfill in eine Prüfung verpackt und die Funktion auf eine einzige verkettete Reduktion reduziert.

if (Object.byPath === undefined) {
  Object.byPath = (obj, path) => path
    .replace(/\[(\w+)\]/g, '.$1')
    .replace(/^\./, '')
    .split(/\./g)
    .reduce((ref, key) => key in ref ? ref[key] : ref, obj)
}

const data = {
  foo: {
    bar: [{
      baz: 1
    }]
  }
}

console.log(Object.byPath(data, 'foo.bar[0].baz'))

Answer 2

Obwohl reduce gut ist, bin ich überrascht, dass niemand forEach verwendet hat:

function valueForKeyPath(obj, path){
        const keys = path.split('.');
        keys.forEach((key)=> obj = obj[key]);
        return obj;
    };

Test%3B%0A%20%20%20%20%20%20%20%20return%20obj%3B%0A%20%20%20%20%7D%3B%0A%0Aalert(valueForKeyPath(test%2C%20'a.b.c')))

Answer 3

Ich entwickle einen Online Shop mit React. Ich habe versucht, die Werte im kopierten Zustandsobjekt zu ändern, um den ursprünglichen Zustand beim Absenden zu aktualisieren. Die obigen Beispiele haben bei mir nicht funktioniert, weil die meisten die Struktur des kopierten Objekts verändern. Ich habe ein funktionierendes Beispiel der Funktion für den Zugriff und die Änderung der Werte der tief verschachtelten Objekteigenschaften gefunden: https://lowrey.me/create-an-object-by-path-in-javascript-2/ Hier ist sie:

const createPath = (obj, path, value = null) => {
  path = typeof path === 'string' ? path.split('.') : path;
  let current = obj;
  while (path.length > 1) {
    const [head, ...tail] = path;
    path = tail;
    if (current[head] === undefined) {
      current[head] = {};
    }
    current = current[head];
  }
  current[path[0]] = value;
  return obj;
};

Answer 4

Dies kann vereinfacht werden, indem die Logik in drei separate Funktionen aufgeteilt wird:

const isVal = a => a != null; // everything except undefined + null

const prop = prop => obj => {
    if (isVal(obj)) {
        const value = obj[prop];
        if (isVal(value)) return value;
        else return undefined;
    } else return undefined;
};

const path = paths => obj => {
    const pathList = typeof paths === 'string' ? paths.split('.') : paths;
    return pathList.reduce((value, key) => prop(key)(value), obj);
};

//usage:
const myObject = { foo: { bar: { baz: 'taco' } } };
const result = path('foo.bar')(myObject);
//results => { baz: 'taco' }

Diese Variante unterstützt:

• Übergabe eines Array- oder String-Arguments
• Umgang mit undefined Werte während des Aufrufs und der Ausführung
• jede Funktion unabhängig zu testen
• jede Funktion unabhängig zu nutzen

Answer 5

Es gibt eine npm Modul, um dies zu tun: https://github.com/erictrinh/safe-access

Beispiel für die Verwendung:

var access = require('safe-access');
access(very, 'nested.property.and.array[0]');