Filtering data with AngularJS Filter. How to iterate over objects?

Question

This is my Filter:

app.filter('ticketsFilter', function (){
return function (input){
    var data = input;
    console.log("Filtered object:")
    console.log(data);
        return input;
};
});

This is my Markup:

<tr ng-repeat="ticket in tickets | ticketsFilter">
  <p> {{ticket.createdByName}} </p>
  <p> {{ticket.title}} </p>
  <p> {{ticket.toDpt}} </p>
</tr> 

The tickets Object is a Object of Objects. On my DB, there are 4 instances of tickets. And, when my ticket hits the filter, the Filtered Object is displayed as:

[Object, Object, Object, Object]

I could not figure out how to acess these objects. I've tried to use $index, received a dependency injection. Tried to use a (for x in input) loop, but the console.log will only display the last object properties. I've tried for(i, i

I can properly acess my objects properties using this:

console.log(data[0].attribute); 

But I dont know how to iterate and acess data[i] instead of data[0]. Well, any tips on how to acess my Object Objects index? I can give more code if needed.

Thanks for any advice.

@EDIT

This is how my console.log($scope.tickets) looks like:

fromDpt: Array[4]
0: Object
1: Object
2: Object
3: Object

Every Object looks like this:

0: Object
__v: 0
_id: "55ddb1e6ca11301020ef9b77"
createdAt: "1440592358061"
createdById: "55d758ee3a7ff720141a18f8"
__proto__: Object

Answer 1

The code below will apply the filter on all objects within tickets and returning the complete array of objects:

<tr ng-repeat="ticket in tickets | filter:ticketsFilter"> 

If you want to use the filter to alter the output of a specific item, you can apply the filter one level below the ng-repeat:

<tr ng-repeat="ticket in tickets">
   {{ticket.name | filter:ticketsFilter}}
</tr>

But it depends on what you want your filter to do. I suggest you to also take look at some info how to apply filters: https://docs.angularjs.org/api/ng/filter/filter

If this does not work for you I would suggest you to be a bit more specific on what you want your filter to do.

Answer 2

using the Ng-model and pasing the model as a filter... here an exaple: http://jsfiddle.net/leojavier/njm96Luv/2/

<div class="field" ng-app="App">
    <input type="text" ng-model="model">
    <table ng-controller="Controller">
        <tr ng-repeat="item in table | filter:model">
            <td ng-class="item.style"><i ng-class="item.badge"></i> {{item.name}}</td>
        </tr>
    </table>
</div>

js

var App = angular.module('App', []);
App.controller('Controller', function($scope, $timeout){
    $scope.table = [
        {name : 'Dan', 
         badge: 'fa fa-futbol-o'
        },
        {name : 'Orlando', 
         badge: 'fa fa-bicycle'},
        {name : 'Dany', 
         badge: 'fa fa-bolt'}
   ];

    $scope.delete = function(item, index){
        item.deleted = true;
        item.style = 'deleted';

        function destroy() {
        $scope.table.splice(index, 1)
        }

        $timeout(function(){destroy();}, 3000);
    }
})

exaple: http://jsfiddle.net/leojavier/njm96Luv/2/

Answer 3

below div will display the ticket as per my textbox input

 <input type="text" ng-model="tickets.Id">
<div ng-repeat="ticket in tickets | filter:tickets">

Answer 4

I think what you're trying to do is nest the ng-repeats. Correct me if I'm wrong, but if I'm right you can do something like this:

<div ng-repeat="ticket in tickets">
<div ng-repeat="myOtherObject in   ticket.someProperty | filter:something">
</div>
</div>

Sorry for the sloppy code, on mobile, but you should get the idea.

Answer 5

All of you gave me great insight about this problem. I thank you every and each of you. Since none had a full answer, I'm going to summarize all the tips and create a full answer to this problem:

First of all. When I'm trying to iterate over

<tr ng-repeat="ticket in tickets | ticketsFilter">

the ticketsFilter will receive a instance of ticketS. TicketS is an Object containing multiple ticket Objects, and each ticket having some properties. So:

$scope.tickets = {
  ticket: { name: 'Philip', status: 'good' },
  ticket: { name: 'R2B21', status: 'sad' },
  ticket: { name: '42', status: 'good' },
  ticket: { name: 'MVW', status: 'bad' }
};

Knowing that my filter will receive tickets as input, I could reach every ticket inside of it with a proper for loop. This way:

app.filter('ticketsFilter', function () { 
  return function(tickets){
    for (var i = 0; i < tickets.length; i ++) { ...

Inside of the for loop, I will reach each and every ticket contained in tickets. So, I just need to grab them and check if they have the propertie that I want. I this case, I want to return only tickets that have a status of 'good'. So:

var ticket = tickets[i]; //Grabing the ticket inside the for loop.
if (ticket.status == 'good') { //Checking if my ticket is good.

Now, I need two things. First, I need to return my data and I need to push every filtered 'good' ticket into my returned data. I need to remember, tought, that the returned object must not be 1 ticket, but ticketS. Because of that, I'm going to create a empty array called filtered before the for loop. And, to push use my if to insert ticket[i] that have a propertie of status=='good'.

So, the full code will be:

app.filter('ticketsFilter', function (){
return function (tickets){
    //creating the empty object that will return data
    var data = []; 
    for (var i = 0; i < tickets.length; i ++) {
        var ticket = tickets[i];
        if (ticket.status == 'good'){
            //Inserting 'good' ticket inside of data
            data.push(ticket);
        };
    };
    //And, finally, returning the data
    return data;
};
});

After that, If I have the Markup:

<tr ng-repeat="ticket in tickets | ticketsFilter">
  <p><b> {{ticket.name}} </b></p>
</tr> 

It would display:

Philip

42

And that is it, iterating over an array of objects and checking their properties. I want to thank, again, every one that tried to help and want to sorry about my bad explanation.

Thank you!