Filter json objects with Angular js ng-repeat directive

Question

In my angular js controller, I have a json array that contains continents and inside the continents contain an array of countries

 //CONTROLLER
app.controller('CountryController', function(){

    this.continents = 
    [
         {
                name:'Africa',
                countries:
                [
                    { name: 'Algeria', code:'DZ', operators:'3'},
                    { name: 'Angola', code:'AO', operators:'1'},
                    { name: 'Benin', code:'BJ', operators:'2'},
                    { name: 'Burkina Faso', code:'BF', operators:'1'}
                ],
          },


         {
               name:'AsiaPacific',
                countries:
                [
                    { name: 'Afghanistan', code:'AF', operators:'4'},
                    { name: 'Bahrain', code:'BH', operators:'2'}
                ],
          }
    ];

});

In my view i want to display the countries in tabbed elements arranged by continents i.e I have tabs to hold the countries in each continent. e.g i have a tab for Africa and inside this tab i want to display the countries in the Africa object. I have tried using the 'filter' to display only countries in a particular continent in each tab but it is not working neither does anything show up. On inspecting the element the code seems to be commented. This is the first task I am trying to accomplish using Angular-js so I am still learning the ropes.

This is what my view looks like

       <div ng-app="countriessupported" class="container container_with_height">
                    <div ng-controller="CountryController as countryCtrl" id="myTabContent"  class="tab-content hidden-xs">
                             <div class="tab-pane fade active in" id="africa">
                                   <div class="col-md-12 countries_col-12" ng-repeat="continent in countryCtrl.continents.name | filter: 'Africa' ">

                                             <a href="">
                                                <div class="col-md-3 country_container" ng-repeat="country in continent.countries">

                                                  <div class="country_name">
                                                      {{ country.name }}
                                                   </div>
                                                </div>
                                           </a>

                                   </div>
                           </div>
                        </div>
            </div>

So the idea is to have the countries repeated in the div with class col-md-3 How can i achieve this please?

Vishal Garg · Accepted Answer · 2016-04-20 13:11:03Z

1

Try this html Code

<div ng-app="countriessupported" class="container container_with_height">
    <div ng-controller="CountryController as countryCtrl" id="myTabContent"  class="tab-content hidden-xs">
        <div class="tab-pane fade active in" id="africa">
            <div class="col-md-12 countries_col-12" ng-repeat="continent in countryCtrl.continents | filter: 'Africa' ">
                <a href="">
                    <div class="col-md-3 country_container" ng-repeat="country in continent.countries">
                        <div class="country_name">{{ country.name }}</div>
                    </div>
                </a>
            </div>
        </div>
    </div>
</div>

let me know if this is helpful

answered Apr 20, 2016 at 13:11

Vishal Garg

863 bronze badges

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

1 Comment

Unicornese Over a year ago

thank you this works. +1 for the effort to provide a clear and helpful answer.

Vermicello · Accepted Answer · 2016-04-20 13:05:27Z

1

Try to change you first repeater to this ng-repeat="continent in countryCtrl.continents instead of ng-repeat="continent in countryCtrl.continents.name the filter sholud be working anyway

answered Apr 20, 2016 at 13:05

Vermicello

3081 gold badge6 silver badges11 bronze badges

Collectives™ on Stack Overflow

Filter json objects with Angular js ng-repeat directive

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related