动态引用嵌套的 Javascript 对象 [英] Referencing a Nested Javascript Object dynamically

问题描述

我有一个对象数组 ($scope.fields)，它定义了如何为 $scope.data 对象模型设置输入字段.fieldName 属性实际上是 data 对象中字段的路径.嵌套对象由句号分隔.

例如:

 $scope.data = {用户:{}}$scope.fields = [{fieldName:'user.firstName',fieldLabel:'First Name',dsiabled:false}{fieldName:'user.location.lat',fieldLabel:'Latitude',dsiabled:false}{fieldName:'user.location.long',fieldLabel:'Latitude',dsiabled:false}]

HTML 中根据 fieldName 绑定 $scope.data 字段的最佳方法是什么.我知道 javascript eval - 但这是最​​好的方法吗?为什么这种语法对我不起作用?

即:

 
<dd ng-bind="eval('data.' fieldObj.fieldName)"></dd>

解决方案

最近我开发了一个 Object 方法来完成这项工作.这种单线性递归方法动态访问数组对象结构中的任何值，无论它嵌套多深.根据你的例子

var fields = [{fieldName:'user.firstName',fieldLabel:'First Name',dsiabled:false},{fieldName:'user.location.lat',fieldLabel:'Latitude',dsiabled:false},{fieldName:'user.location.long',fieldLabel:'Latitude',dsiabled:false}];Object.prototype.getNestedValue = function(...a) {返回 a.length >1 ?(this[a[0]] !== void 0 && this[a[0]].getNestedValue(...a.slice(1))) : this[a[0]];};document.write(fields.getNestedValue(0,"fieldName"));

对于结构更深的对象，你总是可以这样做

Object.prototype.getNestedValue = function(...a) {返回 a.length >1 ?(this[a[0]] !== void 0 && this[a[0]].getNestedValue(...a.slice(1))) : this[a[0]];};var arr = [{fox: [{turn:[857, 432]}]}, {sax: [{pana:[777, 987]}]}, {ton: [{joni:[123, 567]}]}, {piu: [{burn:[666, 37]}]}, {sia: [{foxy:[404, 696]}]}],myObj = { foo : 1, bar: { baz : 2 }, bee : 3 };document.write(arr.getNestedValue(3,"piu",0,"burn",1));

I have an array of objects ($scope.fields) that define how input fields should be set up for the $scope.data object model. The fieldName property is actually the path in the data Object to the field. Nested objects are separated by a period mark.

eg:

    $scope.data = {
        user: {
        }
    }
    $scope.fields = [
        {fieldName:'user.firstName',fieldLabel:'First Name',dsiabled:false}
        {fieldName:'user.location.lat',fieldLabel:'Latitude',dsiabled:false}
        {fieldName:'user.location.long',fieldLabel:'Latitude',dsiabled:false}
    ]

What is the best way in the HTML to bind the $scope.data fields based on the fieldName. I am aware of javascript eval - but is that the best way to do it ? And why does this syntax not work for me ?

ie:

 <div ng-repeat="fieldObj in fields">
    <dd ng-bind="eval('data.' fieldObj.fieldName)"></dd>
 </div>

解决方案

Recently i have developed an Object method to do this job. This single liner recursive approach dynamically accesses any value within an array object structure regardless how deeply nested it is. As per your example

var fields = [
  {fieldName:'user.firstName',fieldLabel:'First Name',dsiabled:false},
  {fieldName:'user.location.lat',fieldLabel:'Latitude',dsiabled:false},
  {fieldName:'user.location.long',fieldLabel:'Latitude',dsiabled:false}
];

Object.prototype.getNestedValue = function(...a) {
  return a.length > 1 ? (this[a[0]] !== void 0 && this[a[0]].getNestedValue(...a.slice(1))) : this[a[0]];
};

document.write(fields.getNestedValue(0,"fieldName"));

For a moredeeply structured object you can always do like

Object.prototype.getNestedValue = function(...a) {
  return a.length > 1 ? (this[a[0]] !== void 0 && this[a[0]].getNestedValue(...a.slice(1))) : this[a[0]];
};

var arr = [{fox: [{turn:[857, 432]}]}, {sax: [{pana:[777, 987]}]}, {ton: [{joni:[123, 567]}]}, {piu: [{burn:[666, 37]}]}, {sia: [{foxy:[404, 696]}]}],
  myObj = { foo : 1, bar: { baz : 2 }, bee : 3 };

document.write(arr.getNestedValue(3,"piu",0,"burn",1));

这篇关于动态引用嵌套的 Javascript 对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！