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

Steps to set up gapi-script authentication with next-auth in a Next.js application

Shifting the final child to the front position proves unsuccessful with jQuery

Tips for leveraging OOP to eliminate redundant code repetition

Find the ID of the clicked table row using HTML and JavaScript

End-to-end testing in Angular for non-Angular applications

The functionality of Router.push() seems to vary depending on the timing

What is the process for transferring information from a Ruby controller to an application JavaScript using AJAX?

The function of removing the ng-submitted class in AngularJS after form submission seems to be malfunctioning when using setPristine and setUnt

Having difficulty linking the Jquery Deferred object with the Jquery 1.9.1 promise

After the checkbox is clicked, I must send a boolean value to the function through the input flag in AngularJS

Utilizing the currentUser object in AngularJS

Obtain the textfield whenever the user desires

What is the best way to sort my API responses to display only users who are either currently online or offline?

Two separate tables displaying unique AJAX JSON response datasets

The context of the selector causes an error to be thrown

Utilize the synchronization feature of ES6 Promises in Jasmine with the then/catch method

Replicate the action of highlighting a section of a website and copying it to the clipboard using JavaScript

How can you retrieve the input value in JavaScript when the cursor is not focused?

Error Handling in Angular2 MVC 4 Project Route Issues

Returning data to be displayed in Jade templates, leveraging Express and Node.js