Javascript：使用动态变量名称访问 JSON 数据中的嵌套值

Question

我有一个像 Here 这样的嵌套 Javascript 对象

var data = { 'name':    { 'heading': 'Name', 'required': 1, 'type': 'String' },
             'profile': {
                  'age':   { 'heading': 'Age', 'required': 0, 'type': 'Number' },
                  'phone': { 'heading': 'Phone', 'required': 0, 'type': 'String'},
                  'city':  { 'heading': 'City', 'required': 0, 'type': 'String'},
                  },
             'status':  { 'heading': 'Status', 'required': 1, 'type': 'String' }
           };

，我可以通过 data.profile.age.type 或 data.name.type 访问字段。没有问题 如果我有动态变量名称，我可以按如下方式访问。再说一遍，没问题。

f = 'profile'; data[f].age.type

但是，这里我有诸如“name”、“profile.age”、“profile.city”等变量名称，显然我无法将它们作为 f = 'profile.age'; 访问它们。 data[f].type 不起作用。

谁能指导我如何以最直接和简单的方式访问它们（获取/设置）？

注意：我尝试过这个，它适用于 get。

data.get = function(p) { o = this; return eval('o.'+p); };
f = 'profile.age'; data.get(f).name;

虽然设置似乎不够简单。如果对于获取和设置还有更好的解决方案，请告诉我。

Answer 1

除非绝对必要，否则不要使用eval。 :) 至少在这种情况下，有更好的方法来做到这一点 - 您可以将嵌套名称拆分为各个部分并迭代它们：

data.get = function(p) {
  var obj = this;

  p = p.split('.');
  for (var i = 0, len = p.length; i < len - 1; i++)
    obj = obj[p[i]];

  return obj[p[len - 1]];
};

data.set = function(p, value) {
  var obj = this;

  p = p.split('.');
  for (var i = 0, len = p.length; i < len - 1; i++)
    obj = obj[p[i]];

  obj[p[len - 1]] = value;
};

Answer 2

您可以只嵌套括号：

var a = 'name', b = 'heading';
data[a][b]; // = `Name`

Answer 3

也许是一个函数，它接受您感兴趣的属性的路径并将其分解为表示属性的标记。像这样的东西（当然，这很粗糙）：

data.get = function(path) {
  var tokens = path.split('.'), val = this[tokens[0]];
  if (tokens.length < 2) return val;
  for(var i = 1; i < tokens.length; i++) {
     val = val[tokens[i]];
  }
  return val;
}

例如：

   var f = 'one.two';
   var data = { one: {two:'hello'}};
   data.get = /* same as above */;

   var val = data.get(f);

Answer 4

访问/设置嵌套值的一种简洁方法是在 ES6 中使用 reduce：

const x = ['a', 'b', 'c'], o = {a: {b: {c: 'tigerking'}}}

// Get value: "tigerking"
console.log(x.reduce((a, b) => a[b], o)) 

// Set value: 
x.slice(0, x.length-1).reduce((a, b) => a[b], o)[x[x.length-1]] = 'blossom'

console.log(o) // {a: {b: {c: 'blossom'}}}

因此，您可以首先使用 'profile.age'.split('.') 将变量 'profile.age' 转换为数组，然后使用上面的方法。

Answer 5

这使用 jquery.each() 函数使用可能包含也可能不包含一个或多个“.”的字符串变量来遍历 json 树。您也可以传入一个数组并省略 .split();

pathString = 类似“person.name”的内容

jsonObj = 类似 {"person" : {"name":"valerie"}} 的内容。

function getGrandchild(jsonObj, pathString){
    var pathArray = pathString.split(".");
    var grandchild = jsonObj;
    $.each(pathArray, function(i, item){
        grandchild = grandchild[item];
    });
    return grandchild;
};

返回“瓦莱丽”