Parcourir tous les Nœuds d'un Objet JSON Arbre avec JavaScript

Si vous pensez que jQuery est une sorte de overkill pour une primitive de la tâche, vous pourriez faire quelque chose comme ça:

//your object
var o = { 
    foo:"bar",
    arr:[1,2,3],
    subo: {
        foo2:"bar2"
    }
};

//called with every property and its value
function process(key,value) {
    console.log(key + " : "+value);
}

function traverse(o,func) {
    for (var i in o) {
        func.apply(this,[i,o[i]]);  
        if (o[i] !== null && typeof(o[i])=="object") {
            //going one step down in the object tree!!
            traverse(o[i],func);
        }
    }
}

//that's all... no magic, no bloated framework
traverse(o,process);

function traverse(o ) {
    for (i in o) {
        if (!!o[i] && typeof(o[i])=="object") {
            console.log(i, o[i])
            traverse(o[i] );
        }
    }
}

Dépend de ce que vous voulez faire. Voici un exemple de parcours d'un objet JavaScript arbre, l'impression des clés et des valeurs qu'elle va à l':

function js_traverse(o) {
    var type = typeof o 
    if (type == "object") {
        for (var key in o) {
            print("key: ", key)
            js_traverse(o[key])
        }
    } else {
        print(o)
    }
}

js> foobar = {foo: "bar", baz: "quux", zot: [1, 2, 3, {some: "hash"}]}
[object Object]
js> js_traverse(foobar)                 
key:  foo
bar
key:  baz
quux
key:  zot
key:  0
1
key:  1
2
key:  2
3
key:  3
key:  some
hash

MODIFIER: Toutes les réponses ont été modifiées pour inclure une nouvelle variable de chemin d'accès donné à partir de l'itérateur comme par @supersan demande. La variable path est un tableau de chaînes de caractères où chaque chaîne dans le tableau représente chaque clé qui a été consulté pour obtenir de l'itération de la valeur de la source d'origine de l'objet. La variable de chemin d'accès peut être alimenté en lodash obtenir de la fonction/méthode. Ou vous pouvez écrire votre propre version de lodash s get qui ne gère que des tableaux comme suit:

JS:

function get (object, path) {
  return path.reduce((obj, pathItem) => obj ? obj[pathItem] : undefined, object);
}

const example = {a: [1,2,3], b: 4, c: { d: ["foo"] }};
//these paths exist on the object
console.log(get(example, ["a", "0"]));
console.log(get(example, ["c", "d", "0"]));
console.log(get(example, ["b"]));
//these paths do not exist on the object
console.log(get(example, ["e", "f", "g"]));
console.log(get(example, ["b", "f", "g"]));

MODIFIER: Cette édité réponse résout boucle infinie traversals.

Arrêt Satanés Infini Objet Traversals

Cette édité réponse fournit encore un des avantages ajoutés de ma réponse originale à cette question qui vous permet d'utiliser le générateur de fonction afin d'utiliser un nettoyant et simple itérable interface (pense à l'aide de for of boucles comme dans for(var a of b) où b est un objet iterable et a est un élément de l'objet iterable). En utilisant le générateur de fonction est une api simple, il contribue également à la réutilisation du code en faisant en sorte que vous n'avez pas à répéter l'itération de la logique partout où vous voulez effectuer une itération profondément sur les propriétés d'un objet et il rend également possible pour break sort de la boucle si vous souhaitez arrêter l'itération précédente.

Une chose que j'ai remarqué qui n'a pas été abordé et qui n'est pas originale dans ma réponse est que vous devez être prudent de la traversée de l'arbitraire (c'est à dire un "hasard" ensemble d'objets, parce que les objets JavaScript peut être auto-référencement. Cela crée la possibilité d'avoir un infini en boucle traversals. Non modifiée de données JSON, cependant ne peut pas être auto-référencement, donc si vous utilisez ce sous-ensemble particulier des objets JS vous n'avez pas à vous soucier de boucle infinie traversals et vous pouvez vous référer à ma réponse originale à cette question ou d'autres réponses. Voici un exemple d'une non-fin de la traversée (remarque il n'est pas exécutable, morceau de code, parce que sinon, il serait de planter votre navigateur onglet).

Également dans l'objet du générateur dans mon édité exemple, j'ai opté pour l'utilisation de Object.keys au lieu de for in qui parcourt seul non-prototype clés sur l'objet. Vous pouvez remplacer cela par vous-même si vous voulez le prototype clés inclus. Voir ma réponse ci-dessous pour les implémentations avec Object.keys et for in.

Pire Ce sera une boucle infinie sur l'auto-référentielle des objets:

//your object
var o = { 
    foo:"bar",
    arr:[1,2,3],
    subo: {
        foo2:"bar2"
    }
};

//this self-referential property assignment is the only edited line 
//from the below original example which makes the traversal 
//non-terminating (i.e. it makes it infinite loop)
o.o = o;

function* traverse(o, path=[]) {
    for (var i of Object.keys(o)) {
        const itemPath = path.concat(i);
        yield [i,o[i],itemPath]; 
        if (o[i] !== null && typeof(o[i])=="object") {
            //going one step down in the object tree!!
            yield* traverse(o[I], itemPath);
        }
    }
}

//that's all... no magic, no bloated framework
for(var [key, value, path] of traverse(o)) {
  //do something here with each key and value
  console.log(key, value, path);
}

Pour vous sauver de cela, vous pouvez ajouter un ensemble à l'intérieur d'une clôture, de sorte que lorsque la fonction est appelée en premier, il commence à construire une mémoire des objets qu'il a vu et ne continue pas d'itération, une fois qu'il vient dans un déjà vu l'objet. L'extrait de code ci-dessous ne que et gère ainsi une infinie cas de boucle.

Mieux Ce ne sera pas de boucle infinie sur l'auto-référentielle des objets:

JS:

//your object
var o = { 
  foo:"bar",
  arr:[1,2,3],
  subo: {
    foo2:"bar2"
  }
};

//this self-referential property assignment is the only edited line 
//from the below original example which makes more naive traversals 
//non-terminating (i.e. it makes it infinite loop)
o.o = o;

function* traverse(o) {
  const memory = new Set();
  function * innerTraversal (o, path=[]) {
    if(memory.has(o)) {
      //we've seen this object before don't iterate it
      return;
    }
    //add the new object to our memory.
    memory.add(o);
    for (var i of Object.keys(o)) {
      const itemPath = path.concat(i);
      yield [i,o[i],itemPath]; 
      if (o[i] !== null && typeof(o[i])=="object") {
        //going one step down in the object tree!!
        yield* innerTraversal(o[i], itemPath);
      }
    }
  }
    
  yield* innerTraversal(o);
}
console.log(o);
//that's all... no magic, no bloated framework
for(var [key, value, path] of traverse(o)) {
  //do something here with each key and value
  console.log(key, value, path);
}

---

Réponse Originale À Cette Question

Pour une nouvelle façon de le faire si vous n'avez pas l'esprit tomber IE et surtout supportant plus les navigateurs actuels (vérifier kangax de l'es6 table pour la compatibilité). Vous pouvez utiliser es2015 générateurs pour cela. J'ai mis à jour @TheHippo de répondre en conséquence. Bien sûr, si vous voulez vraiment IE support, vous pouvez utiliser le babel JavaScript transpiler.

JS:

//your object
var o = { 
    foo:"bar",
    arr:[1,2,3],
    subo: {
        foo2:"bar2"
    }
};

function* traverse(o, path=[]) {
    for (var i in o) {
        const itemPath = path.concat(i);
        yield [i,o[i],itemPath];
        if (o[i] !== null && typeof(o[i])=="object") {
            //going one step down in the object tree!!
            yield* traverse(o[i], itemPath);
        }
    }
}

//that's all... no magic, no bloated framework
for(var [key, value, path] of traverse(o)) {
  //do something here with each key and value
  console.log(key, value, path);
}

Si vous voulez seulement propres propriétés énumérables (essentiellement non-prototype propriétés de la chaîne), vous pouvez le modifier pour effectuer une itération à l'aide de de l'Objet.les touches et un pour...de boucle à la place:

JS:

//your object
var o = { 
    foo:"bar",
    arr:[1,2,3],
    subo: {
        foo2:"bar2"
    }
};

function* traverse(o,path=[]) {
    for (var i of Object.keys(o)) {
        const itemPath = path.concat(i);
        yield [i,o[i],itemPath];
        if (o[i] !== null && typeof(o[i])=="object") {
            //going one step down in the object tree!!
            yield* traverse(o[i],itemPath);
        }
    }
}

//that's all... no magic, no bloated framework
for(var [key, value, path] of traverse(o)) {
  //do something here with each key and value
  console.log(key, value, path);
}

La plupart des moteurs Javascript ne pas optimiser la queue de la récursivité (ce ne serait pas un problème si votre JSON n'est pas profondément imbriqués), mais j'ai l'habitude de pécher par excès de prudence et ne itération au lieu de cela, par exemple,

function traverse(o, fn) {
    const stack = [o]

    while (stack.length) {
        const obj = stack.shift()

        Object.keys(obj).forEach((key) => {
            fn(key, obj[key], obj)
            if (obj[key] instanceof Object) {
                stack.unshift(obj[key])
                return
            }
        })
    }
}

const o = {
    name: 'Max',
    legal: false,
    other: {
        name: 'Maxwell',
        nested: {
            legal: true
        }
    }
}

const fx = (key, value, obj) => console.log(key, value)
traverse(o, fx)

JS:

var test = {
depth00: {
depth10: 'string'
, depth11: 11
, depth12: {
depth20:'string'
, depth21:21
}
, depth13: [
{
depth22:'2201'
, depth23:'2301'
}
, {
depth22:'2202'
, depth23:'2302'
}
]
}
,depth01: {
depth10: 'string'
, depth11: 11
, depth12: {
depth20:'string'
, depth21:21
}
, depth13: [
{
depth22:'2201'
, depth23:'2301'
}
, {
depth22:'2202'
, depth23:'2302'
}
]
}
, depth02: 'string'
, dpeth03: 3
};
function traverse(result, obj, preKey) {
if(!obj) return [];
if (typeof obj == 'object') {
for(var key in obj) {
traverse(result, obj[key], (preKey || '') + (preKey ? '[' +  key + ']' : key))
}
} else {
result.push({
key: (preKey || '')
, val: obj
});
}
return result;
}
document.getElementById('textarea').value = JSON.stringify(traverse([], test), null, 2);

HTML:

<textarea style="width:100%;height:600px;" id="textarea"></textarea>

Vous pouvez obtenir toutes les clés /valeurs et préserver la hiérarchie avec cette

//get keys of an object or array
function getkeys(z){
var out=[]; 
for(var i in z){out.push(i)};
return out;
}
//print all inside an object
function allInternalObjs(data, name) {
name = name || 'data';
return getkeys(data).reduce(function(olist, k){
var v = data[k];
if(typeof v === 'object') { olist.push.apply(olist, allInternalObjs(v, name + '.' + k)); }
else { olist.push(name + '.' + k + ' = ' + v); }
return olist;
}, []);
}
//run with this
allInternalObjs({'a':[{'b':'c'},{'d':{'e':5}}],'f':{'g':'h'}}, 'ob')

C'est une modification (https://stackoverflow.com/a/25063574/1484447)

J'ai créé la bibliothèque de parcourir et de modifier profondément imbriquée objets JS. Découvrez API ici: https://github.com/dominik791

Vous pouvez également jouer avec la bibliothèque interactive à l'aide de démo app:
https://dominik791.github.io/obj-traverse-demo/

Exemples d'utilisation:
Vous devriez toujours avoir à la racine de l'objet qui est le premier paramètre de chaque méthode:

var rootObj = {
name: 'rootObject',
children: [
{
'name': 'child1',
children: [ ... ]
},
{
'name': 'child2',
children: [ ... ]
}
]
};

Le deuxième paramètre est toujours le nom de la propriété qui contient des objets imbriqués. Dans le cas ci-dessus, il serait 'children'.

Le troisième paramètre est un objet que vous utilisez pour trouver l'objet/les objets que vous souhaitez rechercher/modifier/supprimer. Par exemple, si vous êtes à la recherche pour l'objet dont l'id est égal à 1, alors vous passerez { id: 1} comme troisième paramètre.

Et vous pouvez:

1. findFirst(rootObj, 'children', { id: 1 }) pour trouver l'objet premier
   avec id === 1
2. findAll(rootObj, 'children', { id: 1 }) trouver tous les objets
   avec id === 1
3. findAndDeleteFirst(rootObj, 'children', { id: 1 }) à supprimer le premier objet correspondant
4. findAndDeleteAll(rootObj, 'children', { id: 1 }) pour supprimer tous les objets correspondants

replacementObj est utilisé comme dernier paramètre dans les deux dernières méthodes:

1. findAndModifyFirst(rootObj, 'children', { id: 1 }, { id: 2, name: 'newObj'}) pour changer d'abord objet trouvé avec id === 1 à la { id: 2, name: 'newObj'}
2. findAndModifyAll(rootObj, 'children', { id: 1 }, { id: 2, name: 'newObj'}) de modifier tous les objets avec id === 1 à la { id: 2, name: 'newObj'}