L'accès imbriqués les objets JavaScript avec les clés de la chaîne de

J'ai une structure de données comme ceci :

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

Et je voudrais accéder aux données à l'aide de ces variables :

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

part1name doit être rempli avec de someObject.part1.name 's de la valeur, qui est "Partie 1". Même chose avec part2quantity, qui a rempli avec 60.

Est-il de toute façon à atteindre ce soit avec javascript ou JQuery?

Pas sûr de ce que vous demandez ici? Vous voulez être en mesure de requête part1.le nom et le texte "part1.le nom de" retour? Ou vous voulez un moyen d'obtenir la valeur stockée à l'intérieur de part1.nom?
avez-vous essayé de faire comme var part1name = someObject.part1name; `
Je veux requête someObject.part1.nom et retourne la valeur de celui-ci ("Partie 1"). Cependant, je veux la requête (je l'ai appelé "la clé") pour être stocké dans une variable 'part1name'. Merci pour votre réponse. @3nigma : j'ai certainement le faire. Mais ce n'est pas mon intention. Merci pour la réponse.
dans la double réponse, j'adore l'ex république yougoslave de réponse de stackoverflow.com/questions/8817394/...
Voir aussi Convertir en JavaScript chaîne en pointillé dans un objet de référence
Jetez un oeil à JSONPath: github.com/jayway/JsonPath

InformationsquelleAutor Komaruloh | 2011-06-27

473

Je viens de faire ce basé sur un code que j'avais déjà, il semble fonctionner:
```
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;
}
```
Utilisation::
```
Object.byString(someObj, 'part3[0].name');
```
Voir un démo à http://jsfiddle.net/alnitak/hEsys/

MODIFIER certains ont remarqué que ce code renvoie une erreur si elle est transmise d'une chaîne, où la gauche-de la plupart des indices ne correspondent pas à un correctement imbriquées entrée au sein de l'objet. C'est une préoccupation légitime, mais à mon humble avis mieux à même de régler un try /catch bloc lors de l'appel, plutôt que d'avoir cette fonction silencieusement retour undefined pour un index non valide.
- Votre réponse est exactement ce dont j'ai besoin. Il fonctionne comme un charme. Cependant Felix Kling venu avec l'autre, et qui fonctionne aussi bien que votre réponse. J'ai juste l'impression que je dois mentionner sa réponse comme correcte soit. De toute façon, merci beaucoup pour la solution que vous m'avez donné.
- Si la valeur est null? Comment puis-je gérer cela?
- Cela fonctionne à merveille. Merci de contribuer à ce à internet en les enveloppant comme un nœud de package.
- merci pour la correction, je l'ai testé mon premier changement 🙁
- J'ai roulé en arrière votre edit parce qu'il n'est pas seulement le object types qui peuvent avoir des propriétés.
- Salut. solution sympa. cependant le code dans le jsfiddle ne fonctionne pas comme prévu alors que le code dans votre réponse - ne. i.imgur.com/hTMwxOC.png
- merci - j'ai fixé le violon.
- Je viens de faire: github.com/capaj/object-resolve-path juste être conscient que cela ne va pas jouer à nice lors de votre propriété le nom contient "[] " pour lui-même. Regex sera remplacer par". " et il ne fonctionne pas comme prévu
- de grandes choses; à l'aide de la lodash de la bibliothèque, on peut aussi faire: _.get(object, nestedPropertyString);
- J'ai eu ce problème: le fait d'Avoir une propriété avec un point à l'intérieur. J'ai donc mis à jour cette réponse: jsfiddle.net/hEsys/359
- Ce sera probablement se perdre dans la mer de commentaires, mais il des erreurs si vous essayez et de répondre à une propriété qui n'existe pas. Donc 'part3[0].name.iDontExist'. Ajout d'une vérification pour voir si o est un objet dans la if in résout le problème. (La façon dont vous aller à ce sujet est à vous). Voir mise à jour de violon: jsfiddle.net/hEsys/418
- Vraiment génial! J'ai une question... je ne la rencontre entre "objet-itération-problème" (Voir: stackoverflow.com/questions/500504/...), quand j'utilise cette approche pour itérer un Tableau avec "var x dans la gamme"?
- seulement si vous avez mal ajouté une méthode pour Array.prototype comme une énumération des biens. Parfois, à l'aide de for .. in peut effectivement être mieux, car il énumère à la fois les indices numériques et toutes les autres propriétés de la chaîne qui ont été délibérément ajoutées au tableau. En tout cas, ce code ne fait pas les utiliser for .. in.
- Ah, c'est intéressant! Je thougt à l'aide de si (k o) {} conduit à un problème similaire. Mais maintenant, je comprends! Merci beaucoup...
- Utile! Je me demandais comment aller d'un point a nivelé Chaîne" d'un élément à l'intérieur d'une table de hachage
- Il en est ainsi de l'or. Nous avons une config en fonction de l'application et c'est plutôt utile! Merci!
- J'ai joué avec votre code et l'a tourné à être utilisé pour stocker une valeur dans un objet imbriqué, qui est visée par la chaîne. Peut être trouvé ici: jsfiddle.net/jaakkokarhu/omm2v8ty
- Géniale merci, j'ai ajouté par la si (k o) { instruction null vérifier pour o, si, pour une raison quelconque, le proprty est null le code se bloque en ajoutant une valeur null vérifier ce qui fonctionne toujours ( si (o != null && k o ) {)
- J'ai envie d'ajouter: if (!s) { return o; } au début.
- Comment mettre en valeur?
- Pour la boucle pourrait être remplacé par un réduire a.reduce((so, k) => so[k], o)
- il pourrait, mais un tas de gens, ne serait plus en mesure de le comprendre. En outre, ce code a existé bien avant ES6.
- Je trouve ça beaucoup plus facile à comprendre (et si la compréhension est un sujet de préoccupation, pourquoi le nom de toutes les variables d'une seule lettre?). Je n'ai pas dit votre réponse est incorrecte, ou même vous suggère de le modifier en aucune façon, je l'ai trouvé très utile. Juste pour dire qu'il est plus susinct version que beaucoup de gens préfère. ES6 n'existe aujourd'hui.
InformationsquelleAutor Alnitak
156

C'est la solution que j'utilise:
```
function resolve(path, obj=self, separator='.') {
    var properties = Array.isArray(path) ? path : path.split(separator)
    return properties.reduce((prev, curr) => prev && prev[curr], obj)
}
```
Exemple d'utilisation:
```
//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
```
Limitations:
- Ne pouvez pas utiliser les crochets ([]) pour les indices de tableau—bien que la spécification d'indices de tableau entre le séparateur de jeton (par exemple, .) fonctionne correctement, comme indiqué ci-dessus.
- aide à réduire est une excellente solution (on peut aussi utiliser _.reduce() de le trait de soulignement ou lodash de la bibliothèque)
- Je pense que self est probablement pas défini ici. Voulez-vous dire this?
- Non, self est défini. this serait incorrect.
- href="https://developer.mozilla.org/en-US/docs/Web/API/Window.self" >developer.mozilla.org/en-US/docs/Web/API/Window.self
- lodash + tapuscrit de mise en œuvre: _.reduce(path.split('.'), (previous, current) => !safe ? previous[current] : (previous ? previous[current] : undefined), target || self);
- Voici mon complément de définir des valeurs par path: pastebin.com/jDp5sKT9
- Quelqu'un sait comment le port de ce Tapuscrit?
- Il serait préférable d'utiliser une valeur par défaut de l'objet dans la signature, c'est à dire la fonction de résoudre(chemin d'accès, obj={}) et enlever le "|| auto" qui se réfère à la fenêtre (globale) de l'objet.
- bonne idée. Cette réponse a été rédigée avant que les paramètres par défaut ont été disponibles dans la plupart des navigateurs. Je vais le mettre à jour à la fonction de "résoudre(chemin d'accès, obj=auto)", puisque le référencement de l'objet global en tant que par défaut est intentionnelle.
- Je paramétrées, le "séparateur" de la valeur en tant que bien, afin de soutenir la non-typique des noms de propriété.
- Ajout du support pour l'utilisation d'une propriété tableau en entrée, et mis à jour à plein ES6 syntaxe.
- vous pouvez également le faire: function resolve(properties, obj=self) { return properties.reduce((prev, curr) => prev && prev[curr], obj) } et vous pouvez l'utiliser comme ceci resolve(["style","width"], document.body)
InformationsquelleAutor speigg
151

C'est maintenant pris en charge par lodash à l'aide de _.get(obj, property). Voir https://lodash.com/docs#get

Exemple de la doc:
```
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'
```
- Ce devrait être la seule réponse, parce que c'est le seul à travailler pour les deux dot et le support de la syntaxe et Elle n'échoue pas, lorsque nous avons "[] " dans la chaîne de la clé dans le chemin d'accès.
- C'. De Plus, il prend en charge _.set(...)
- ce happes si l'objet n'est pas trouvé?
- si la valeur passée en tant que l'objet n'est pas définie ou non un objet, _.get montrent le même comportement que quand aucune touche n'est trouvé dans la condition d'objet. par exemple _.get(null, "foo") -> undefined, _.get(null, "foo", "bar") -> "bar". Cependant, ce comportement n'est pas défini dans les documents soumis à modification.
- vous de rigolade? Et qui ne veut pas/ne pouvez pas utiliser lodash?
InformationsquelleAutor Ian Walker-Sperber
61

Vous auriez à analyser la chaîne vous-même:
```
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';
    }
}
```
Il a fallu que vous pouvez également définir les indices de tableau avec la notation point:
```
var part3name1 = "part3.0.name";
```
Il rend l'analyse plus facile.

DÉMO
- Kling : Votre solution ne me fournir ce dont j'ai besoin. Et je vous remercie beaucoup pour cela. Mais Alnitak également fournir différentes façons et à l'air de fonctionner non plus. Puisque je ne peux choisir qu'une seule réponse, je vais choisir Alnitak réponse. Non pas que sa solution est meilleure que vous, ou quelque chose comme ça. De toute façon, j'apprécie vraiment votre solution et l'effort que vous avez donné.
- Oh je croyais que vous pouvez toujours voter réponses sur votre propre question.... de toute façon j'étais plus ou moins plaisante, je n'ai pas besoin de plus de réputation 😉 amusez-vous bien!
- Kling : Vous devez avoir au moins 15 réputation à voter. 🙂 Je crois que vous n'avez pas besoin de plus de réputation à 69k+ . Merci
- FWIW de conversion de [] syntaxe syntaxe de la propriété est assez trivial.
- J'aime cette réponse parce que je peux donner à mes utilisateurs un format plus simple pour les chemins d'accès - à l'aide de la notation de point pour les index au lieu de crochets. Merci!
- Si vous modifiez la boucle while pour while (l > 0 && (obj = obj[current]) && i < l) ensuite ce code fonctionne pour les chaînes sans points ainsi.
- Honnêtement, c'est la meilleure réponse parce que vous pouvez réellement changer la valeur de l'obj[dernier] mais vous ne pouvez pas modifier la valeur si vous l'avez fait d'une autre manière.
InformationsquelleAutor Felix Kling

Fonctionne pour les tableaux /tableaux à l'intérieur de l'objet.
Défensive contre des valeurs non valides.

JS:

/**
 * Retrieve nested item from object/array
 * @param {Object|Array} obj
 * @param {String} path dot separated
 * @param {*} def default value ( if result undefined )
 * @returns {*}
 */
function path(obj, path, def){
    var i, len;

    for(i = 0,path = path.split('.'), len = path.length; i < len; i++){
        if(!obj || typeof obj !== 'object') return def;
        obj = obj[path[i]];
    }

    if(obj === undefined) return def;
    return obj;
}

//////////////////////////
//        TEST         //
//////////////////////////

var arr = [true, {'sp ace': true}, true]

var obj = {
  'sp ace': true,
  arr: arr,
  nested: {'dotted.str.ing': true},
  arr3: arr
}

shouldThrow(`path(obj, "arr.0")`);
shouldBeDefined(`path(obj, "arr[0]")`);
shouldBeEqualToNumber(`path(obj, "arr.length")`, 3);
shouldBeTrue(`path(obj, "sp ace")`);
shouldBeEqualToString(`path(obj, "none.existed.prop", "fallback")`, "fallback");
shouldBeTrue(`path(obj, "nested['dotted.str.ing'])`);

HTML:

<script src="https://cdn.rawgit.com/coderek/e7b30bac7634a50ad8fd/raw/174b6634c8f57aa8aac0716c5b7b2a7098e03584/js-test.js"></script>

Merci c'est le meilleur et le plus performant réponse - jsfiddle.net/Jw8XB/1
Je voudrais souligner que le chemin doit séparer les éléments avec des points. Les accolades ne fonctionne pas. I. e. pour accéder à premier élément de matrice de l'utilisation "0.sp ace".

InformationsquelleAutor TheZver

39

ES6: une Seule ligne dans Vanila JS (il retourne la valeur null si ne trouvez pas, au lieu de donner de l'erreur):
```
'path.string'.split('.').reduce((p,c)=>p&&p[c]||null, MyOBJ)
```
ou exemple:
```
'a.b.c'.split('.').reduce((p,c)=>p&&p[c]||null, {a:{b:{c:1}}})
```
Pour un prêt à utiliser la fonction qui reconnaît également faux, 0 et nombre négatif et d'accepter les valeurs par défaut du paramètre:
```
const resolvePath = (object, path, defaultValue) => path
   .split('.')
   .reduce((o, p) => o ? o[p] : defaultValue, object)
```
Exemple d'utilisation:
```
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:

À ensemble un chemin d'accès (Demandé par @rob gordon), vous pouvez utiliser:
```
const setPath = (object, path, value) => path
   .split('.')
   .reduce((o,p,i) => o[p] = path.split('.').length === ++i ? value : o[p] || {}, object)
```
Exemple:
```
let myVar = {}
setPath(myVar, 'a.b.c', 42) => 42
console.log(myVar) => {a: {b: {c: 42}}}
```
Accéder au tableau avec []:
```
const resolvePath = (object, path, defaultValue) => path
   .split(/[\.\[\]\'\"]/)
   .filter(p => p)
   .reduce((o, p) => o ? o[p] : defaultValue, object)
```
exemple
```
const myVar = {a:{b:[{c:1}]}}
resolvePath(myVar,'a.b[0].c') => 1
resolvePath(myVar,'a["b"][\'0\'].c') => 1
```
- J'adore cette technique. C'est vraiment compliqué, mais je voulais utiliser cette technique pour l'affectation. let o = {a:{b:{c:1}}}; let str = 'a.b.c'; str.split('.').splice(0, str.split('.').length - 1).reduce((p,c)=>p&&p[c]||null, o)[str.split('.').slice(-1)] = "some new value";
- J'aime l'idée de l'utilisation de la réduire, mais votre logique semble hors de 0, undefined et null valeurs. {a:{b:{c:0}}} retourne null au lieu de 0. Peut-être explicitement la vérification de la valeur null ou undefined permettra d'éclaircir ces questions. (p,c)=>p === undefined || p === null ? undefined : p[c]
- Salut @SmujMaiku, le "prêt à utiliser" de retour de la fonction correctement pour '0', 'undefined' et 'null', je viens de tester sur la console: resolvePath({a:{b:{c:0}}},'une.b.c',null) => 0; Il vérifier si la clé existe, au lieu de la valeur elle-même qui évitent de plus d'une case
- ici defaultValue n'a pas fonctionné, à l'aide de Reflect.has(o, k) ? ... (ES6 Réfléchir.a) a travaillé si
- setPath sera mis à la valeur sur la première occurrence de la dernière sélection. Par exemple let o = {}; setPath(o, 'a.a', 0) résultats dans {a: 0} plutôt que {a: {a: 0}}. voir ceci post pour trouver une solution.
- merci pour le point de sortir, je le fixe à l'aide de l'index
InformationsquelleAutor Adriano Spadoni
21

en utilisant eval:
```
var part1name = eval("someObject.part1.name");
```
envelopper de retour pas défini en cas d'erreur
```
function path(obj, path) {
    try {
        return eval("obj." + path);
    } catch(e) {
        return undefined;
    }
}
```
http://jsfiddle.net/shanimal/b3xTw/

Veuillez utiliser le bon sens et la prudence lorsque vous utilisez la puissance de eval. C'est un peu comme un sabre laser, si vous le mettez sur, il y a 90% de chance que vous allez couper une branche. Ce n'est pas pour tout le monde.
- Si oui ou non eval est une bonne idée dépend de l'endroit où la propriété des données de chaîne vient de. Je doute, vous avez toutes les raisons d'être inquiets pour les pirates de rupture dans la via statique "var p=" un.b.c';eval(p);" type d'appel. C'est une parfaitement belle idée pour que.
InformationsquelleAutor
16

Vous pouvez gérer pour obtenir la valeur d'une profonde membre de l'objet avec la notation point sans JavaScript externe de la bibliothèque avec la simple astuce suivante:
```
new Function('_', 'return _.' + path)(obj);
```
Dans votre cas, afin d'obtenir la valeur de part1.name de someObject viens de faire:
```
new Function('_', 'return _.part1.name')(someObject);
```
Ici est un simple violon démo: https://jsfiddle.net/harishanchu/oq5esowf/
- fonction deep_value ( obj, chemin ) { return new Function ("o", " retour o.' + chemin d'accès )( obj ); }
InformationsquelleAutor Harish Anchu

Ce ne sera probablement jamais voir la lumière du jour... mais ici, il est de toute façon.

Remplacer [] support de la syntaxe avec .
Split sur . caractère
Supprimer des chaînes vides
Trouver le chemin d'accès (sinon undefined)

JS:

//"one liner" (ES6)

const deep_value = (obj, path) => 
  path
    .replace(/\[|\]\.?/g, '.')
    .split('.')
    .filter(s => s)
    .reduce((acc, val) => acc && acc[val], obj);
    
//... and that's it.

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

console.log(deep_value(someObject, "part1.name"));               //Part 1
console.log(deep_value(someObject, "part2.qty"));                //60
console.log(deep_value(someObject, "part3[0].name"));            //Part 3A

Il a fait voir la lumière du jour!! merci

InformationsquelleAutor Nick Grealy

C'est un liner avec lodash.

const deep = { l1: { l2: { l3: "Hello" } } };
const prop = "l1.l2.l3";
const val = _.reduce(prop.split('.'), function(result, value) { return result ? result[value] : undefined; }, deep);
//val === "Hello"

Ou encore mieux...

const val = _.get(deep, prop);

Ou ES6 version w/réduire...

const val = prop.split('.').reduce((r, val) => { return r ? r[val] : undefined; }, deep);

Plunkr

ce doit être la accepté de répondre!

InformationsquelleAutor James

7

Je pense que vous demandez ceci:
```
var part1name = someObject.part1.name;
var part2quantity = someObject.part2.qty;
var part3name1 =  someObject.part3[0].name;
```
Vous pourriez poser pour cette:
```
var part1name = someObject["part1"]["name"];
var part2quantity = someObject["part2"]["qty"];
var part3name1 =  someObject["part3"][0]["name"];
```
De travail

Ou peut-être vous demandez ce
```
var partName = "part1";
var nameStr = "name";

var part1name = someObject[partName][nameStr];
```
Enfin, vous pourriez poser pour cette
```
var partName = "part1.name";

var partBits = partName.split(".");

var part1name = someObject[partBits[0]][partBits[1]];
```
- Je pense que l'OP est demandé pour la dernière solution. Cependant, les chaînes n'ont pas Split méthode, mais plutôt split.
- Effectivement, j'ai demandé à la dernière. Le nom de la pièce de la variable est rempli avec de la ficelle en indiquant la clé de la structure de valeur. Ta solution me semble de sens. Cependant j'ai peut-être besoin de modifier pour augmenter la profondeur dans les données, tels que les 4-5 et plus. Et je me demande si je peux traiter le tableau et objet de manière uniforme avec cela?
InformationsquelleAutor Hogan

Ici, je vous offre plus de moyens, ce qui semble plus rapide à de nombreux égards:

Option 1: scinde une chaîne sur . ou [ ou ] ou " ou ", inverse, de l'ignorer des éléments vides.

function getValue(path, origin) {
    if (origin === void 0 || origin === null) origin = self ? self : this;
    if (typeof path !== 'string') path = '' + path;
    var parts = path.split(/\[|\]|\.|'|"/g).reverse(), name; //(why reverse? because it's usually faster to pop off the end of an array)
    while (parts.length) { name=parts.pop(); if (name) origin=origin[name]; }
    return origin;
}

Option 2 (le plus rapide de tous, à l'exception de eval): le niveau Faible de caractère scan (pas de regex/split/etc, juste un petit char d'analyse).
Remarque: celui-ci ne prend pas en charge les devis pour les index.

function getValue(path, origin) {
    if (origin === void 0 || origin === null) origin = self ? self : this;
    if (typeof path !== 'string') path = '' + path;
    var c = '', pc, i = 0, n = path.length, name = '';
    if (n) while (i<=n) ((c = path[i++]) == '.' || c == '[' || c == ']' || c == void 0) ? (name?(origin = origin[name], name = ''):(pc=='.'||pc=='['||pc==']'&&c==']'?i=n+2:void 0),pc=c) : name += c;
    if (i==n+2) throw "Invalid path: "+path;
    return origin;
} //(around 1,000,000+/- ops/sec)

Option 3: (nouveau: option 2 étendu à l'appui de citations - un peu plus lent, mais toujours rapide)

function getValue(path, origin) {
    if (origin === void 0 || origin === null) origin = self ? self : this;
    if (typeof path !== 'string') path = '' + path;
    var c, pc, i = 0, n = path.length, name = '', q;
    while (i<=n)
        ((c = path[i++]) == '.' || c == '[' || c == ']' || c == "'" || c == '"' || c == void 0) ? (c==q&&path[i]==']'?q='':q?name+=c:name?(origin?origin=origin[name]:i=n+2,name='') : (pc=='['&&(c=='"'||c=="'")?q=c:pc=='.'||pc=='['||pc==']'&&c==']'||pc=='"'||pc=="'"?i=n+2:void 0), pc=c) : name += c;
    if (i==n+2 || name) throw "Invalid path: "+path;
    return origin;
}

JSPerf: http://jsperf.com/ways-to-dereference-a-delimited-property-string/3

"eval(...)" est toujours le roi si (performance sage qui est). Si vous avez de la propriété des chemins directement sous votre contrôle, il ne devrait pas y avoir de problèmes avec l'utilisation de 'eval' (surtout si la vitesse est souhaitée). Si le tirant de la propriété des chemins "sur le fil" (sur la ligne!? lol :P), alors oui, utiliser autre chose pour être en sécurité. Seul un idiot pourrait dire de ne jamais utiliser de "eval", comme il Les raisons SONT bonnes quand l'utiliser. Aussi, "Il est utilisé dans Doug Crockford du parseur JSON." Si l'entrée est en sécurité, pas de problèmes à tous. Utiliser le bon outil pour le bon travail, c'est tout.

InformationsquelleAutor James Wilkins

6

Speigg l'approche est très soigné et propre, mais j'ai trouvé cette réponse lors de la recherche de la solution d'accès à AngularJS $propriétés de portée par chemin de chaîne et avec un peu de modification, il fait le travail:
```
$scope.resolve = function( path, obj ) {
    return path.split('.').reduce( function( prev, curr ) {
        return prev[curr];
    }, obj || this );
}
```
Il suffit de placer cette fonction dans la racine de votre contrôleur et de l'utiliser à n'importe quel enfant de la portée comme ceci:
```
$scope.resolve( 'path.to.any.object.in.scope')
```
InformationsquelleAutor nesinervink

Juste au cas où, de toute personne visitant cette question en 2017 ou plus tard, et à la recherche d'un facile à retenir, voici élaborer un billet de blog sur Accéder à des Objets Imbriqués dans JavaScript sans être dupés par

Impossible de lire la propriété 'foo' undefined erreur

Accès Des Objets Imbriqués À L'Aide Du Tableau De Réduire

Prenons l'exemple de la structure

const user = {
    id: 101,
    email: '[email protected]',
    personalInfo: {
        name: 'Jack',
        address: [{
            line1: 'westwish st',
            line2: 'washmasher',
            city: 'wallas',
            state: 'WX'
        }]
    }
}

Pour être en mesure d'accéder à des tableaux imbriqués, vous pouvez écrire votre propre tableau de réduire util.

const getNestedObject = (nestedObj, pathArr) => {
    return pathArr.reduce((obj, key) =>
        (obj && obj[key] !== 'undefined') ? obj[key] : undefined, nestedObj);
}

//pass in your object structure as array elements
const name = getNestedObject(user, ['personalInfo', 'name']);

//to access nested array, just pass in array index as an element the path array.
const city = getNestedObject(user, ['personalInfo', 'address', 0, 'city']);
//this will return the city from the first address item.

Il est également un excellent type de manipulation minimale de la bibliothèque typés que signifie tout cela pour vous.

Avec typés, votre code devrait ressembler à ceci

const city = t(user, 'personalInfo.address[0].city').safeObject;

Avertissement: je suis l'auteur de ce forfait.

InformationsquelleAutor Dinesh Pandiyan

3

Je n'ai pas encore trouvé un paquet à faire toutes les opérations avec un string path, donc j'ai fini par écrire mon propre petit paquet qui prend en charge insert(), get() (avec retour par défaut), set() et remove() opérations.

Vous pouvez utiliser la notation point, entre parenthèses, le nombre d'indices, chaîne nombre de propriétés, et les touches avec les caractères de mot. Simple d'utilisation ci-dessous:
```
> var jsocrud = require('jsocrud');

...

//Get (Read) ---
> var obj = {
>     foo: [
>         {
>             'key w/non-word chars': 'bar'
>         }
>     ]
> };
undefined

> jsocrud.get(obj, '.foo[0]["key w/non-word chars"]');
'bar'
```
https://www.npmjs.com/package/jsocrud

https://github.com/vertical-knowledge/jsocrud

InformationsquelleAutor Kyle

Fonction Simple, permettant soit une chaîne ou un tableau de chemin.

function get(obj, path) {
  if(typeof path === 'string') path = path.split('.');

  if(path.length === 0) return obj;
  return get(obj[path[0]], path.slice(1));
}

const obj = {a: {b: {c: 'foo'}}};

console.log(get(obj, 'a.b.c')); //foo

console.log(get(obj, ['a', 'b', 'c'])); //foo

Si vous allez à la poste le code comme une réponse, veuillez expliquer pourquoi, le code répond à la question.

InformationsquelleAutor Ben

2

Il y a un npm module pour ce faire: https://github.com/erictrinh/safe-access

Exemple d'utilisation:
```
var access = require('safe-access');
access(very, 'nested.property.and.array[0]');
```
InformationsquelleAutor caleb

/**
 * Access a deep value inside a object 
 * Works by passing a path like "foo.bar", also works with nested arrays like "foo[0][1].baz"
 * @author Victor B. https://gist.github.com/victornpb/4c7882c1b9d36292308e
 * Unit tests: http://jsfiddle.net/Victornpb/0u1qygrh/
 */
function getDeepVal(obj, path) {
    if (typeof obj === "undefined" || obj === null) return;
    path = path.split(/[\.\[\]\"\']{1,2}/);
    for (var i = 0, l = path.length; i < l; i++) {
        if (path[i] === "") continue;
        obj = obj[path[i]];
        if (typeof obj === "undefined" || obj === null) return;
    }
    return obj;
}

Fonctionne avec

getDeepVal(obj,'foo.bar')
getDeepVal(obj,'foo.1.bar')
getDeepVal(obj,'foo[0].baz')
getDeepVal(obj,'foo[1][2]')
getDeepVal(obj,"foo['bar'].baz")
getDeepVal(obj,"foo['bar']['baz']")
getDeepVal(obj,"foo.bar.0.baz[1]['2']['w'].aaa[\"f\"].bb")

InformationsquelleAutor Vitim.us

1

En réduire le est bon, je suis surpris que personne n'utilisait forEach:
```
function valueForKeyPath(obj, path){
        const keys = path.split('.');
        keys.forEach((key)=> obj = obj[key]);
        return obj;
    };
```
Test
- Vous n'êtes pas à même de vérifier si obj[key] existe réellement. C'est peu fiable.
- par défaut js ne sera ni vérifier si la clé d'un objet existe: a.b.c va lever une exception si il n'y a pas de propriété b dans votre objet. Si vous avez besoin de quelque chose en silence rejetant le mauvais chemin d'accès clé (que je ne recommande pas), vous pouvez toujours remplacer le forEach avec celui-ci keys.forEach((key)=> obj = (obj||{})[key]);
- Je passe par un objet qui manquait une accolade, mon mauvais 🙂
InformationsquelleAutor Flavien Volken

Inspiré par @webjay de réponse:
https://stackoverflow.com/a/46008856/4110122

J'ai fait une fonction qui pouvez-vous l'utiliser pour Obtenir/Définir/Annuler toute valeur dans l'objet

function Object_Manager(obj, Path, value, Action) 
{
    try
    {
        if(Array.isArray(Path) == false)
        {
            Path = [Path];
        }

        let level = 0;
        var Return_Value;
        Path.reduce((a, b)=>{
            level++;
            if (level === Path.length)
            {
                if(Action === 'Set')
                {
                    a[b] = value;
                    return value;
                }
                else if(Action === 'Get')
                {
                    Return_Value = a[b];
                }
                else if(Action === 'Unset')
                {
                    delete a[b];
                }
            } 
            else 
            {
                return a[b];
            }
        }, obj);
        return Return_Value;
    }

    catch(err)
    {
        console.error(err);
        return obj;
    }
}

Pour l'utiliser:

 //Set
 Object_Manager(Obj,[Level1,Level2,Level3],New_Value, 'Set');

 //Get
 Object_Manager(Obj,[Level1,Level2,Level3],'', 'Get');

 //Unset
 Object_Manager(Obj,[Level1,Level2,Level3],'', 'Unset');

InformationsquelleAutor Mohamad Hamouday

0

Si vous avez besoin d'accéder à différentes imbriquées clé, sans le savoir, au codage du temps (il va être facile de les aborder) vous pouvez utiliser la notation de tableau accesseur:
```
var part1name = someObject['part1']['name'];
var part2quantity = someObject['part2']['qty'];
var part3name1 =  someObject['part3'][0]['name'];
```
Ils sont l'équivalent de la dot notation accesseur et peut varier au moment de l'exécution, par exemple:
```
var part = 'part1';
var property = 'name';

var part1name = someObject[part][property];
```
est équivalent à
```
var part1name = someObject['part1']['name'];
```
ou
```
var part1name = someObject.part1.name;
```
J'espère que cette adresse à votre question...

MODIFIER

Je ne vais pas utiliser une chaîne à mantain une sorte de xpath requête d'accéder à un objet de valeur.
Comme vous l'avez d'appeler une fonction pour analyser la requête et récupérer la valeur que je voudrais suivre un autre chemin (pas :
```
var part1name = function(){ return this.part1.name; }
var part2quantity = function() { return this['part2']['qty']; }
var part3name1 =  function() { return this.part3[0]['name'];}

//usage: part1name.apply(someObject);
```
ou, si vous êtes mal à l'aise avec la appliquer méthode
```
var part1name = function(obj){ return obj.part1.name; }
var part2quantity = function(obj) { return obj['part2']['qty']; }
var part3name1 =  function(obj) { return obj.part3[0]['name'];}

//usage: part1name(someObject);
```
Les fonctions sont plus courts, plus clairs, l'interprète de les vérifier pour vous pour les erreurs de syntaxe et ainsi de suite.

Par la manière, je pense qu'une simple assignation faite au bon moment sera suffisante...
- Intéressant. Mais dans mon cas, le someObject est initialiser, mais lorsque j'ai attribuer de la valeur à part1name. Je ne connais que la structure. C'est pourquoi j'ai utiliser des chaînes de caractères pour décrire la structure. Et en espérant être en mesure de l'utiliser pour interroger mes données à partir de someObject. Merci pour le partage de votre pensée. 🙂
- Je pense que vous serez d'écrire que l'objet n'est PAS encore initialisé lorsque vous créez vos variables. Par la manière, je ne suis pas d'obtenir le point, pourquoi ne pouvez-vous pas faire la mission au moment opportun?
- Désolé de ne pas mentionner que someObject n'est pas encore initialisé. Comme pour la raison, someObject est récupérer via un service web. Et je veux avoir un tableau d'en-tête qui se composent de part1name, part2qty, etc. Pour que je puisse simplement faire une boucle par l'en-tête de tableau et d'obtenir la valeur que je voulais basé sur part1name valeur que la 'clé'/chemin de someObject.
InformationsquelleAutor Eineki

Juste eu la même question récemment et avec succès utilisé https://npmjs.org/package/tea-properties qui a également set objet imbriqué/tableaux :

obtenir:

var o = {
  prop: {
    arr: [
      {foo: 'bar'}
    ]
  }
};

var properties = require('tea-properties');
var value = properties.get(o, 'prop.arr[0].foo');

assert(value, 'bar'); //true

ensemble:

var o = {};

var properties = require('tea-properties');
properties.set(o, 'prop.arr[0].foo', 'bar');

assert(o.prop.arr[0].foo, 'bar'); //true

"Ce module a été abandonné. Utilisation chaijs/pathval."

InformationsquelleAutor abernier

Les solutions sont ici juste pour accéder à l'profondément imbriqués les touches. J'en avais besoin pour accéder, ajouter, modifier et supprimer les clés. C'est ce que je suis venu avec:

var deepAccessObject = function(object, path_to_key, type_of_function, value){
    switch(type_of_function){
        //Add key/modify key
        case 0: 
            if(path_to_key.length === 1){
                if(value)
                    object[path_to_key[0]] = value;
                return object[path_to_key[0]];
            }else{
                if(object[path_to_key[0]])
                    return deepAccessObject(object[path_to_key[0]], path_to_key.slice(1), type_of_function, value);
                else
                    object[path_to_key[0]] = {};
            }
            break;
        //delete key
        case 1:
            if(path_to_key.length === 1){
                delete object[path_to_key[0]];
                return true;
            }else{
                if(object[path_to_key[0]])
                    return deepAccessObject(object[path_to_key[0]], path_to_key.slice(1), type_of_function, value);
                else
                    return false;
            }
            break;
        default:
            console.log("Wrong type of function");
    }
};

path_to_key: chemin d'accès dans un tableau. Vous pouvez le remplacer par votre string_path.split(".").
type_of_function: 0 pour l'accédant(ne pas passer toute valeur à value), 0 pour ajouter et modifier. 1 pour la suppression.

InformationsquelleAutor ayushgp

Au lieu d'une chaîne en un tableau peut être utilisé de tels objets imbriqués et des tableaux par exemple: ["my_field", "another_field", 0, "last_field", 10]

Voici un exemple qui permettrait de modifier un champ basé sur ce tableau de la représentation. Je suis en utilisant quelque chose comme ça dans react.js pour contrôler l'entrée des champs qui changent l'état des structures imbriquées.

let state = {
        test: "test_value",
        nested: {
            level1: "level1 value"
        },
        arr: [1, 2, 3],
        nested_arr: {
            arr: ["buh", "bah", "foo"]
        }
    }

function handleChange(value, fields) {
    let update_field = state;
    for(var i = 0; i < fields.length - 1; i++){
        update_field = update_field[fields[i]];
    }
    update_field[fields[fields.length-1]] = value;
}

handleChange("update", ["test"]);
handleChange("update_nested", ["nested","level1"]);
handleChange(100, ["arr",0]);
handleChange('changed_foo', ["nested_arr", "arr", 3]);
console.log(state);

InformationsquelleAutor Jodo

Basée sur une précédente réponse, j'ai créé une fonction qui peut également gérer les supports. Mais pas de points à l'intérieur d'eux en raison de la scission.

function get(obj, str) {
  return str.split(/\.|\[/g).map(function(crumb) {
    return crumb.replace(/\]$/, '').trim().replace(/^(["'])((?:(?!)[^\\]|\\.)*?)$/, (match, quote, str) => str.replace(/\\(\\)?/g, "$1"));
  }).reduce(function(obj, prop) {
    return obj ? obj[prop] : undefined;
  }, obj);
}

InformationsquelleAutor Vincent

JS:

//(IE9+) Two steps

var pathString = "[0]['property'].others[3].next['final']";
var obj = [{
  property: {
    others: [1, 2, 3, {
      next: {
        final: "SUCCESS"
      }
    }]
  }
}];

//Turn string to path array
var pathArray = pathString
    .replace(/\[["']?([\w]+)["']?\]/g,".$1")
    .split(".")
    .splice(1);

//Add object prototype method
Object.prototype.path = function (path) {
  try {
    return [this].concat(path).reduce(function (f, l) {
      return f[l];
    });
  } catch (e) {
    console.error(e);
  }
};

//usage
console.log(obj.path(pathArray));
console.log(obj.path([0,"doesNotExist"]));

InformationsquelleAutor Oboo Chin

De travail avec `Underscore`'s `property` ou `propertyOf`:

JS:

var test = {
  foo: {
    bar: {
      baz: 'hello'
    }
  }
}
var string = 'foo.bar.baz';


//document.write(_.propertyOf(test)(string.split('.')))

document.write(_.property(string.split('.'))(test));

HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>

Bonne Chance...

InformationsquelleAutor Akash

0

Je suis le développement de boutique en ligne à Réagir. J'ai essayé de changer les valeurs dans copié d'état de l'objet à mettre à jour l'état original avec elle sur "soumettre".
Les exemples ci-dessus n'ont pas bien fonctionné pour moi, parce que la plupart d'entre eux de mutation de la structure de l'objet copié. J'ai trouvé un exemple fonctionnel de la fonction permettant d'accéder et de modifier les valeurs de la profondeur de l'objet imbriqué propriétés: https://lowrey.me/create-an-object-by-path-in-javascript-2/ Ici, il est:
```
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;
};
```
InformationsquelleAutor Dm Mh

Extension de Mohamad Hamouday Réponse de remplir touches manquantes

function Object_Manager(obj, Path, value, Action, strict) 
{
    try
    {
        if(Array.isArray(Path) == false)
        {
            Path = [Path];
        }

        let level = 0;
        var Return_Value;
        Path.reduce((a, b)=>{
            console.log(level,':',a, '|||',b)
            if (!strict){
              if (!(b in a)) a[b] = {}
            }


            level++;
            if (level === Path.length)
            {
                if(Action === 'Set')
                {
                    a[b] = value;
                    return value;
                }
                else if(Action === 'Get')
                {
                    Return_Value = a[b];
                }
                else if(Action === 'Unset')
                {
                    delete a[b];
                }
            } 
            else 
            {
                return a[b];
            }
        }, obj);
        return Return_Value;
    }

    catch(err)
    {
        console.error(err);
        return obj;
    }
}

Exemple


obja = {
  "a": {
    "b":"nom"
  }
}

//Set
path = "c.b" //Path does not exist
Object_Manager(obja,path.split('.'), 'test_new_val', 'Set', false);

//Expected Output: Object { a: Object { b: "nom" }, c: Object { b: "test_new_value" } }

InformationsquelleAutor sam

-1

Quoi au sujet de cette solution:

setJsonValue: function (json, field, val) {
  if (field !== undefined){
    try {
      eval("json." + field + " = val");
    }
    catch(e){
      ;
    }
  }  
}

Et celui-ci, pour obtenir:

getJsonValue: function (json, field){
  var value = undefined;
  if (field !== undefined) {
    try {
      eval("value = json." + field);
    } 
    catch(e){
      ;
    }
  }
  return value;
};

Probablement certains les considèrent dangereux, mais ils doivent être beaucoup plus rapide ensuite, l'analyse de la chaîne.

InformationsquelleAutor Jonan Georgiev

-1

Construction de Alnitak réponse:

if(!Object.prototype.byString){
  //NEW byString which can update values
Object.prototype.byString = function(s, v, o) {
  var _o = o || this;
      s = s.replace(/\[(\w+)\]/g, '.$1'); //CONVERT INDEXES TO PROPERTIES
      s = s.replace(/^\./, ''); //STRIP A LEADING DOT
      var a = s.split('.'); //ARRAY OF STRINGS SPLIT BY '.'
      for (var i = 0; i < a.length; ++i) {//LOOP OVER ARRAY OF STRINGS
          var k = a[i];
          if (k in _o) {//LOOP THROUGH OBJECT KEYS
              if(_o.hasOwnProperty(k)){//USE ONLY KEYS WE CREATED
                if(v !== undefined){//IF WE HAVE A NEW VALUE PARAM
                  if(i === a.length -1){//IF IT'S THE LAST IN THE ARRAY
                    _o[k] = v;
                  }
                }
                _o = _o[k];//NO NEW VALUE SO JUST RETURN THE CURRENT VALUE
              }
          } else {
              return;
          }
      }
      return _o;
  };

}

Cela vous permet de définir la valeur et de la!

J'ai créé un package npm et github avec ce même

InformationsquelleAutor Tamb

Vous devez vous connecter pour publier un commentaire.

Accès Des Objets Imbriqués À L'Aide Du Tableau De Réduire

De travail avec Underscore's property ou propertyOf:

De travail avec `Underscore`'s `property` ou `propertyOf`: