Getting object property in JavaScript

Question

I have a object from a get request from an API like this:

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"
    }
  }]
}

If I want to get the country name, I need to do:

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

However I am trying to access trough a ng-repeat those properties that I pass in the controller in order to generalize my controller.

Inside the controller I have:

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

And the 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>

It only works for the properties from the content object, but not properties of objects inside content. What can I do?

Thank you in advance for your time and help!

Does this answer help? stackoverflow.com/questions/19824959/… — PaulG
– PaulG, Commented Feb 3, 2016 at 21:15
Not exactly... I was looking for an html more generic, and then I would define everything on the controller — caiolopes
– caiolopes, Commented Feb 3, 2016 at 21:30
Because I have other JSONs with even more nested objects, that I would like that same html logic to be applied — caiolopes
– caiolopes, Commented Feb 3, 2016 at 21:32

Community · Accepted Answer · 2017-05-23 12:15:38Z

1

You'll likely need to create a helper function that parses the string you're passing in as a key and returns the object's value because you can't access an object's child properties using a string:

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

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

Luckily this nice function exists:

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

It takes an object and string, turns the string into an array and traverses the properties of your passed in object until it reaches the property you're searching for. It will work for any depth of object property.

if you take this function and put it on your controller's scope you can then call it with your field's name and item object:

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

Here's a working example of the idea: http://plnkr.co/edit/34fKDKReu24381Ox8kdK?p=preview

edited May 23, 2017 at 12:15

CommunityBot

11 silver badge

answered Feb 3, 2016 at 21:53

paul trone

7025 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

caiolopes Over a year ago

Thank you very much, this was exactly what I was looking for! Only a small thing: I needed to change a little bit the helper function to verify if the obj was an object because it was returning the whole object instead of only the property, so I added another shift and returned it and it worked!

Collectives™ on Stack Overflow

Getting object property in JavaScript

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related