在JavaScript中获取对象属性

时间:2016-02-03 21:08:03

标签: javascript angularjs

我有来自这样的API的get请求的对象:

var object = {
  "number": 0,
  "size": 9999,
  "totalPages": 0,
  "numberOfElements": 1,
  "totalElements": 1,
  "content": [{
    "id": 26,
    "name": "New York",
    "acronym": "SP",
    "country": {
      "id": 33,
      "name": "United States",
      "acronym": "US"
    }
  }]
}

如果我想获得国家/地区名称,我需要这样做:

object.content[0].country.name or object["content"][0]["country"]["name"]

但是我试图通过ng-repeat来访问我在控制器中传递的属性,以便推广我的控制器。

在控制器里面我有:

$scope.$parent.fields = ["acronym", "name", "country.name"];
$scope.columns = [
  {
    field: $scope.fields[0],
    "class": 'col-sm-1'
  }, {
    field: $scope.fields[1],
    "class": 'col-sm-5'
  }, {
    field: $scope.fields[2],
    "class": 'col-sm-3'
  }
];

HTML:

<tr ng-repeat="item in elements.content">
  <td ng-repeat="column in columns">{{ item[column.field] }}</td>
  <td id="op">
    <button class="btn btn-xs btn-success" ng-click="preview(item)">
      <i class="fa fa-eye"></i> View
    </button>
    <button class="btn btn-xs btn-primary" ng-click="update(item)">
      <i class="fa fa-pencil"></i> Edit
    </button>
    <button class="btn btn-xs btn-danger" ng-click="remove(item)">
      <i class="fa fa-trash"></i> Delete
    </button>
  </td>
</tr>

它仅适用于内容对象的属性,但不适用于内容中对象的属性。我该怎么办?

提前感谢您的时间和帮助!

1 个答案:

答案 0 :(得分:1)

您可能需要创建一个辅助函数来解析您作为键传入的字符串并返回该对象的值,因为您无法访问对象&#39 ; s使用字符串的子属性:

var item = {
  property: {
    child: 'somevalue'
  }
}

// this will return undefined
item['property.child']

幸运的是this nice function存在:

function getDescendantProp(obj, desc) {
  var arr = desc.split(".");
  while(arr.length && (obj = obj[arr.shift()]));
  return obj;
}

它接受一个对象和字符串,将字符串转换为数组并遍历传入对象的属性,直到它到达您要搜索的属性。它适用于任何深度的对象属性。

如果您使用此功能并将其放在控制器的范围内,则可以使用您的字段名称和项目对象来调用它:

<td ng-repeat="column in columns">{{ getDescendantProp(item, column.field) }}</td>

以下是该想法的一个实例:http://plnkr.co/edit/34fKDKReu24381Ox8kdK?p=preview