Sort objects based on a specific property that they possess

Question

Sort objects based on a specific property that they possess

In my current setup, I have an array of objects structured as shown below:

$scope.people = [{name:
                  {last:"Doe", first:"John"}},
                 {name:
                  {last:"Smith", first:"Joe"}}];

My goal is to implement a live filter feature based on last names using a text box.

To see the implementation in action, you can visit this jsfiddle link: http://jsfiddle.net/HB7LU/4287/

Your assistance on this matter would be greatly appreciated. Thank you!

Edit: Apologies for providing the incorrect jsfiddle link initially.

javascript angularjs filter angularjs-ng-repeat jsfiddle

Answer 1

Answer №1

Starting with your fiddle example, I would suggest the following:

HTML

<div ng-controller="MyCtrl">    
  <input ng-model="search" ng-init="search = ''" placeholder="type to search" />
  <div ng-repeat="person in people | filter:{name.last: search}">
    {{ person | json }}
  </div>
</div>

JS

var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
    $scope.people = [{ name: { last: 'Doe', first: 'John' } },
                     { name: { last: 'Smith', first: 'Joe' } }];

}

Check out the plunker demo here

Answer 2

Starting with your fiddle example, I would suggest the following:

HTML

<div ng-controller="MyCtrl">    
  <input ng-model="search" ng-init="search = ''" placeholder="type to search" />
  <div ng-repeat="person in people | filter:{name.last: search}">
    {{ person | json }}
  </div>
</div>

JS

var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
    $scope.people = [{ name: { last: 'Doe', first: 'John' } },
                     { name: { last: 'Smith', first: 'Joe' } }];

}

Check out the plunker demo here

Answer 3

Answer №2

Let's implement a new custom filter!

Expanding on your current code:

myApp.filter("customFilter", function() {
    return function(items, searchTerm) {
        if(!searchTerm) {
            return items;   
        }
        var filteredItems = [];
        for(item in items) {
            if(items[item].name.last.indexOf(searchTerm) == 0) {
                filteredItems.push(items[item]);
            }
        }
        console.log(filteredItems);
        return filteredItems;
    }
});

Now, you can apply this custom filter named "customFilter" anywhere in your HTML. Simply use it like this:

<div ng-controller="MyCtrl">
    <input ng-model="search.name.last"/>
    <div ng-repeat="person in people | customFilter:search.name.last">
        {{person.name.last}}, {{person.name.first}}
    </div>
</div>

Answer 4

Let's implement a new custom filter!

Expanding on your current code:

myApp.filter("customFilter", function() {
    return function(items, searchTerm) {
        if(!searchTerm) {
            return items;   
        }
        var filteredItems = [];
        for(item in items) {
            if(items[item].name.last.indexOf(searchTerm) == 0) {
                filteredItems.push(items[item]);
            }
        }
        console.log(filteredItems);
        return filteredItems;
    }
});

Now, you can apply this custom filter named "customFilter" anywhere in your HTML. Simply use it like this:

<div ng-controller="MyCtrl">
    <input ng-model="search.name.last"/>
    <div ng-repeat="person in people | customFilter:search.name.last">
        {{person.name.last}}, {{person.name.first}}
    </div>
</div>

Sort objects based on a specific property that they possess

Answer №1

Answer №2

Similar questions

Only one JSON file is handled at a time, no duplicates are made

Create a duplicate of the table and remove specific rows

Response from the controller upon choosing a value from the selection dropdown

Is there a way to access an SD card by clicking on an HTML link using JavaScript?

Obtaining req.body twice while handling a 307 redirect in an Express application

Utilizing the getJSON Method to Automatically Fill a Dropdown Selection Element

Failed to install angular-cli globally on the system

Tips for managing content and tables that exceed their container's boundaries

Change to a dark theme using React hooks in typescript

Incorporate a precise form using the Angular JS template

What is the best way to utilize JQuery AJAX to send XML data for a delete request?

React - Issue with Material-UI radio button group not filling button upon clicking

The reactivity of Vuex and Vue does not work as expected when a dictionary is used as a

Guide on adjusting shadow intensity with a Directional Light on a BoxGeometry in Three.js

Using PHP to display a message box and redirecting to a different webpage

Are there any CSS hacks available to address the combination of position: sticky and overflow within the parent element?

What is the most effective method to implement an isLoggedIn function in AngularJS that is accessible from any controller or template?

Reveal content as you scroll

Encountering difficulties in creating an app with Apache Cordova

Hidden Div on Google Maps no longer concealing