How can you sort an array based on a shared object property using Angular.js?

Question

How can you sort an array based on a shared object property using Angular.js?

I've been grappling with this issue for a while now. My app receives data about individuals in JSON format:

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

My goal is to categorize them into groups based on their city, and display the options in dropdown <ul>s. For example, if a user selects "Seattle", only John and Michael should be displayed within the <li> elements.

Is there any efficient way to accomplish this task?

javascript arrays json angularjs filter

Answer 1

Answer №1

app.controller('BarCtrl', function($scope) {
   $scope.users = [
      {
        "name": "Alice",
        "city": "Paris",
        "country": "France"
      },
      {
        "name": "Bob",
        "city": "London",
        "country": "United Kingdom"
      },
      {
        "name": "Eva",
        "city": "Berlin",
        "country": "Germany"
      }
    ];
});

You can easily filter it using the following method:

<div ng-repeat="user in users | filter:{ city: 'London' }">

If you want to have a dynamic search functionality:

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

Here is a working example for reference.

Note that by specifying search.city as the ng-model, you are filtering based on the city field specifically instead of the entire object.

Answer 2

app.controller('BarCtrl', function($scope) {
   $scope.users = [
      {
        "name": "Alice",
        "city": "Paris",
        "country": "France"
      },
      {
        "name": "Bob",
        "city": "London",
        "country": "United Kingdom"
      },
      {
        "name": "Eva",
        "city": "Berlin",
        "country": "Germany"
      }
    ];
});

You can easily filter it using the following method:

<div ng-repeat="user in users | filter:{ city: 'London' }">

If you want to have a dynamic search functionality:

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

Here is a working example for reference.

Note that by specifying search.city as the ng-model, you are filtering based on the city field specifically instead of the entire object.

Answer 3

Answer №2

To achieve grouping, you can utilize the angular-filter library. Modify your view code as shown below:

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

You can check out the working example on Plunker.

Answer 4

To achieve grouping, you can utilize the angular-filter library. Modify your view code as shown below:

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

You can check out the working example on Plunker.

Answer 5

Answer №3

You can use a filter in the select option to limit the user's selection to one city retrieved from the server. Check out this example on JSFiddle.

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="">Select 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>

Answer 6

You can use a filter in the select option to limit the user's selection to one city retrieved from the server. Check out this example on JSFiddle.

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="">Select 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>

Answer 7

Answer №4

Here is a suggestion,

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

Take a look at this plunk, http://plnkr.co/edit/RTsvyWqPxBdwF6KUZGmR?p=preview

Answer 8

Here is a suggestion,

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

Take a look at this plunk, http://plnkr.co/edit/RTsvyWqPxBdwF6KUZGmR?p=preview

How can you sort an array based on a shared object property using Angular.js?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Can you explain the TypeScript type for the queryKey in React Query?

Is there a way to parse a JSON file and present its data in a TableView using JavaFX?

I'm curious about how I can selectively utilize vuex-persistedstate with Nuxt for certain stores only

How can I easily make ajax requests in FLOW3?

When a webpage reload triggers a 404 error, my website's iframe with the source "videoUrl | sanitize" will display

Transforming rows into a JSON key/value pair in PostgreSQL is an effective way to organize

Is there a way to make the React component automatically refresh upon clicking the search button?

When the JS function 'postMessage()' is invoked on an HTML object tag, what specific action does it perform?

Adjusting the viewer.js script

The art of rotating PDF files and various image formats

AngularJS validation for mandatory fields is malfunctioning

Leverage the greater than operator within an AngularJS controller

Tips for dynamically coloring table cells in Spotfire based on their values

Effective methods for importing components in VueJS 2.0

Is it possible to dynamically add an id or class to an element using document.createElement in JavaScript?

Why does it seem like only one div is being added?

differences between using form's get method and sending an angular $http.get request

Refresh the page using a promise in Angular after a delay of 3 seconds

Leveraging $routeProvider alongside $stateProvider

Guide to successfully navigating to a webpage using page.link when the link does not have an id, but is designated by a