Wie kann ich auf verschachtelte Objekte, Arrays oder JSON zugreifen und diese verarbeiten?

Ich habe eine verschachtelte Datenstruktur, die Objekte und Arrays enthält. Wie kann ich die Informationen extrahieren, dh auf einen bestimmten oder mehrere Werte (oder Schlüssel) zugreifen?

Zum Beispiel:

var data = {
    code: 42,
    items: [{
        id: 1,
        name: 'foo'
    }, {
        id: 2,
        name: 'bar'
    }]
};

Wie konnte ich auf die zugreifen name des zweiten Artikels in items?

Sie können auf diese Weise darauf zugreifen

data.items[1].name

oder

data["items"][1]["name"]

Beide Wege sind gleich.

Falls Sie versuchen, auf eine zuzugreifen item aus der Beispielstruktur von id oder nameohne seine Position im Array zu kennen, wäre der einfachste Weg, dies zu tun, zu verwenden unterstrich.js Bücherei:

var data = {
    code: 42,
    items: [{
        id: 1,
        name: 'foo'
    }, {
        id: 2,
        name: 'bar'
    }]
};

_.find(data.items, function(item) {
  return item.id === 2;
});
// Object {id: 2, name: "bar"}

Aus meiner Erfahrung verwenden Sie stattdessen Funktionen höherer Ordnung for oder for..in Schleifen führen zu Code, über den man leichter nachdenken kann und der daher besser wartbar ist.

Nur meine 2 Cent.

Manchmal kann es wünschenswert sein, auf ein verschachteltes Objekt mit einer Zeichenfolge zuzugreifen. Der einfache Ansatz ist zum Beispiel die erste Ebene

var obj = { hello: "world" };
var key = "hello";
alert(obj[key]);//world

Bei komplexen json ist dies jedoch häufig nicht der Fall. Je komplexer json wird, desto komplexer werden auch die Ansätze zum Auffinden von Werten innerhalb von json. Ein rekursiver Ansatz zum Navigieren im json ist am besten, und wie diese Rekursion genutzt wird, hängt von der Art der Daten ab, nach denen gesucht wird. Wenn es sich um bedingte Anweisungen handelt, kann eine JSON-Suche ein gutes Werkzeug sein.

Wenn die Eigenschaft, auf die zugegriffen wird, bereits bekannt ist, aber der Pfad komplex ist, z. B. in diesem Objekt

var obj = {
 arr: [
    { id: 1, name: "larry" },    
    { id: 2, name: "curly" },
    { id: 3, name: "moe" }
 ]
};

Und Sie wissen, dass Sie das erste Ergebnis des Arrays im Objekt erhalten möchten, das Sie vielleicht verwenden möchten

var moe = obj["arr[0].name"];

Dies führt jedoch zu einer Ausnahme, da es keine Eigenschaft des Objekts mit diesem Namen gibt. Die Lösung, um dies verwenden zu können, wäre, den Baumaspekt des Objekts zu glätten. Dies kann rekursiv erfolgen.

function flatten(obj){
 var root = {};
 (function tree(obj, index){
   var suffix = toString.call(obj) == "[object Array]" ? "]" : "";
   for(var key in obj){
    if(!obj.hasOwnProperty(key))continue;
    root[index+key+suffix] = obj[key];
    if( toString.call(obj[key]) == "[object Array]" )tree(obj[key],index+key+suffix+"[");
    if( toString.call(obj[key]) == "[object Object]" )tree(obj[key],index+key+suffix+".");   
   }
 })(obj,"");
 return root;
}

Jetzt kann das komplexe Objekt abgeflacht werden

var obj = previous definition;
var flat = flatten(obj);
var moe = flat["arr[0].name"];//moe

Hier ist ein jsFiddle Demo dieses Ansatzes verwendet wird.

Um auf ein verschachteltes Attribut zuzugreifen, müssen Sie seinen Namen angeben und dann das Objekt durchsuchen.

Wenn Sie den genauen Pfad bereits kennen, können Sie ihn wie folgt in Ihrem Skript fest codieren:

data['items'][1]['name']

diese funktionieren auch –

data.items[1].name
data['items'][1].name
data.items[1]['name']

Wenn Sie den genauen Namen nicht vorher wissen oder ein Benutzer derjenige ist, der den Namen für Sie bereitstellt. Dann ist ein dynamisches Durchsuchen der Datenstruktur erforderlich. Einige haben hier vorgeschlagen, dass die Suche mit a durchgeführt werden kann for Schleife, aber es gibt eine sehr einfache Möglichkeit, einen Pfad mit zu durchlaufen Array.reduce.

const data = { code: 42, items: [{ id: 1, name: 'foo' }, { id: 2, name: 'bar' }] }
const path = [ 'items', '1', 'name']
let result = path.reduce((a,v) => a[v], data)

Der Pfad ist eine Art zu sagen: Nimm zuerst das Objekt mit dem Schlüssel items, was zufällig ein Array ist. Dann nimm die 1-st Element (0 Index-Arrays). Nehmen Sie zuletzt das Objekt mit Schlüssel name in diesem Array-Element, das zufällig der String ist bar.

Wenn Sie einen sehr langen Pfad haben, können Sie sogar verwenden String.split um das alles einfacher zu machen –

'items.1.name'.split('.').reduce((a,v) => a[v], data)

Dies ist nur einfaches JavaScript, ohne Bibliotheken von Drittanbietern wie jQuery oder lodash zu verwenden.