How do you bind to name of array in object array?

Question

I have an object with an array:

 {
    People: [
        {
            label: 'label1',
            type: 'type1'
        },
        {
            label: 'label2',
            type: 'type2'
        }],
    Places: [
       {
            label: 'label1',
            type: 'type1'
        },
        {
            label: 'label2',
            type: 'type2'
        }]
}

I have an ng-repeat to create a list. I can bind to the properties inside People and Places but cannot bind to the name 'People' and 'Places'.

My html is something like this:

<div ng-repeat="category in vm.categories">
   <button>{{category}}</button>
    <ul>
      <li ng-repeat="subcategory in category">
        <a href="#"> {{subcategory.label}}</a>
      </li>
    </ul>
   </button>
 </div>

so subcategories are all fine but {{category}} doesn't return People/Places. How do I bind to the name of the array in the object?

Ramesh Rajendran · Accepted Answer · 2018-02-26 09:48:10Z

1

Try this by using iterate over the keys and values with ng-repeat in AngularJS?

angular.module("test",[]).controller("testc",function($scope) {   
      $scope.categories = {
People: [
    {
        label: 'label1',
        type: 'type1'
    },
    {
        label: 'label2',
        type: 'type2'
    }],
Places: [
   {
        label: 'label1',
        type: 'type1'
    },
    {
        label: 'label2',
        type: 'type2'
    }]
};
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="testc">
   <div ng-repeat="(key, value) in categories">
   <button>{{key}}</button>
<ul>
  <li ng-repeat="subcategory in value">
    <a href="#"> {{subcategory.label}}</a>
  </li>
</ul>
   </button>
 </div>
</div>

edited Feb 26, 2018 at 9:48

answered Feb 26, 2018 at 9:42

Ramesh Rajendran

38.9k49 gold badges159 silver badges241 bronze badges

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

3 Comments

Ramesh Rajendran Over a year ago

@user3214545 Could you please do mark as an answer if it works for you. :)

user3214545 Over a year ago

apologies for the delay, it wouldnt let me mark it for a few mins :)

Ramesh Rajendran Over a year ago

No problem! Great & Thanks :)

Collectives™ on Stack Overflow

How do you bind to name of array in object array?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related