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

I had a vision to create a blog using the power of React JS and NodeJS (Express, MongoDB). My goal was to have the ability to not only post text, but also code

Utilizing jQueryUI for rendering tabbed content with JSON data

Looking for a skilled JavaScript expert to help create a script that will automatically redirect the page if the anchor is changed. Any t

Having trouble handling LocalDate Optional deserialization with Jdk8Module?

Bring in a collection of classes of various types from one TypeScript file to another

Determining the duration since generating a unique objectid in mongodb

Cannot access Nextjs Query Parameters props within the componentDidMount() lifecycle method

Customizing the MUI X Sparkline: Incorporating the percentage symbol at the end of the tooltip data within the MUI Sparklinechart

Unable to identify the pdf file using multer in node.js

Error: Attempting to assign a value to the property 'running' of an undefined variable

An array in a JSON Schema must include a certain specified string value

Ways of assigning a null value to a key in a JSON body request

Retrieving data response post upload with JQuery and an HTML5 Uploader

[Vue alert]: Component mounting failed due to usage of mixin with a parameter

I am facing unexpected results while trying to search for a string array object using elemMatch in Mongoose

What is the best approach for manipulating live data in localStorage using ReactJS?

What is the best way to insert an object at a particular position within an array containing numerous nested objects?

Discover the significance of a data attribute's value for effective comparisons

What is the reason the child component is not being displayed?

Passing parameters to JavaScript onload event from PHP