Parcourez les structures imbriquées d'objets et de tableaux JavaScript à l'aide de chemins de chaîne

Question

J'ai une structure de données comme celle-ci :

var someObject = {
    'partie 1' : {
        'nom' : 'Partie 1',
        'taille' : '20',
        'quantité' : '50'
    },
    'partie 2' : {
        'nom' : 'Partie 2',
        'taille' : '15',
        'quantité' : '60'
    },
    'partie3' : [
        {
            'nom' : 'Partie 3A',
            'taille' : '10',
            'quantité' : '20'
        }, {
            'nom' : 'Partie 3B',
            'taille' : '5',
            'quantité' : '20'
        }, {
            'nom' : 'Partie 3C',
            'taille' : '7,5',
            'quantité' : '20'
        }
    ]
};</pré>
<p>Je souhaite accéder aux données en utilisant les variables suivantes : </p>
<pre class="brush:php;toolbar:false;">var part1name = "part1.name";
var part2quantity = "part2.qty";
var part3name1 = "part3[0].name";

part1name doit être rempli avec la valeur de someObject.part1.name, qui est "Part 1". Il en va de même pour part2quantity, qui est complété à 60.

Existe-t-il un moyen d'y parvenir en utilisant du JavaScript pur ou du JQuery ?

Answer 1

Ceci est désormais pris en charge via lodash en utilisant _.get(obj, property). Veuillez vous référer à https://lodash.com/docs#get

Exemple tiré de la documentation :

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 2

Je viens de créer ceci sur la base d'un code similaire que j'avais déjà et cela semble fonctionner :

Object.byString = function(o, s) {
    s = s.replace(/\[(\w+)\]/g, '.'); // 将索引转换为属性
    s = s.replace(/^\./, '');           // 去掉前导点
    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 exemple fonctionnel sur http://jsfiddle.net/alnitak/hEsys/.

EDIT Certaines personnes ont remarqué que ce code générera une erreur s'il transmet une chaîne dont l'index le plus à gauche ne correspond pas à une entrée correctement imbriquée dans l'objet. C'est une préoccupation valable, mais je pense qu'il est préférable d'utiliser try / catch块来处理，而不是使这个函数静默地返回undefined lors de l'appel.