current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

I've been struggling with this over a few hours. The situation is, I have an app, that receives data about people in this JSON format:

"people": [
      {
        "name": "Ivan",
        "city": "Moscow",
        "country": "Russia"
      },
      {
        "name": "John",
        "city": "Seattle",
        "country": "United States"
      },
      {
        "name": "Michael",
        "city": "Seattle",
        "country": "United States"
      }
    ]

And I need to filter them into groups based on their city (to be displayed in dropdown <ul>s. I.e. user clicks "Seattle" and <li>s with John and Michael are displayed.

How this can be done?

share|improve this question

4 Answers 4

up vote 2 down vote accepted

Use angular-filter to do the grouping. Your view code will look like this:

<ul ng-repeat="(key, value) in people | groupBy: 'city'">
  City: {{ key }}
  <li ng-repeat="person in value">
    person: {{ person.name }} 
  </li>
</ul>

Here's a Plunker.

share|improve this answer
up vote 2 down vote 
app.controller('FooCtrl', function($scope) {
   $scope.people = [
      {
        "name": "Ivan",
        "city": "Moscow",
        "country": "Russia"
      },
      {
        "name": "John",
        "city": "Seattle",
        "country": "United States"
      },
      {
        "name": "Michael",
        "city": "Seattle",
        "country": "United States"
      }
    ];
});

And you can filter it like so:

<div ng-repeat="person in people | filter:{ city: 'Seattle' }">

For a dynamic search:

<div ng-app="demo" ng-controller="FooCtrl"><input type="text" ng-model="search.city" >
  <ul>
     <li ng-repeat = "person in people | filter: search"> {{person.name}</li>
  </ul>
</div>

working example

If you used just search as the ng-model it would filter the whole object. But as I used search.city, it filters just that field.

share|improve this answer
    
Thanks a lot! And one more thing: how can I do it if I don't explicitly know, what city will be in the array (it's a response from server)? –  fivepointseven 18 hours ago
    
Yeah no problem, jsfiddle.net/8jFpV/588 –  philibuster 18 hours ago
up vote 1 down vote

You can put the filter in select option which bounds user to select either one city that comes from the server. https://jsfiddle.net/4bhjm5vu/

app.js:

angular.module('myApp', [])
.controller('FooCtrl', function($scope) {
    $scope.people = [
    {
        "name": "Ivan",
        "city": "Moscow",
        "country": "Russia"
    },
    {
        "name": "John",
        "city": "Seattle",
        "country": "United States"
   },
   {
       "name": "Michael",
       "city": "Seattle",
       "country": "United States"
   }
];
})
.filter('unique', function() {
    return function(input, key) {
        var unique = {};
        var uniqueList = [];
        for(var i = 0; i < input.length; i++){
            if(typeof unique[input[i][key]] == "undefined"){
                unique[input[i][key]] = "";
                uniqueList.push(input[i]);
            }
        }
        return uniqueList;
    };
});

html:

<div ng-app="myApp">
    <div ng-controller="FooCtrl">
        <select name="city" ng-model="selectedCity" data-ng-options="person.city as person.city for person in people | unique:'city'"><option data-ng-disabled='true' value="">City</option>
        </select>

        <table class="table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>City</th>
                    <th>Country</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="person in people | filter: {city: selectedCity}">
                    <td>{{person.name}}</td>
                    <td>{{person.city}}</td>
                    <td>{{person.country}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
share|improve this answer
up vote 0 down vote

You can try,

<input type="text" ng-model = "search.city" >
<ul>
  <li ng-repeat = "people in peoples | filter: search"> {{people.name}}      </li>
</ul>

See this plunk, http://plnkr.co/edit/SxcorUe1uAszY9FqBJXd?p=preview

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.