How to use orderBy and filter with ng-repeat, using an object (instead of array)?

Question

I have data "like" this:

$scope.persons = {
        "ID123": {
            name_de: "Andre",
            name_en: "Anrew",
            age: 30,
            description: "He is the father of xyz and . . .",

             . . .

        },
        "IDabc": {
            name_de: "Markus",
            name_en: "Mark",
            age: 20,

             . . .
        },
        "IDxyz": {
            name_de: "Isaak",
            name_en: "Isaac",
            age: 23,

             . . .
        }

    . . .

}

and i have an input/ng-repeat:

<input ng-model="query" placeholder="Suche . . .">
<ul>
    <li ng-repeat="p in persons | orderBy:'name_de' | filter:query"> Some output here . . . </li>
</ul>

Now is the question how can i order and filter this?

It worked with an Array of persons, but i need the "ID's" so the object is necessary!?

I am looking also for a way to filter the object by N-properties e.g for name_de AND name_en (so it will show ID123 if i search for Andre and also if i search for Andrew) BUT ignoring the text of "description" (first i had the problem that the filter checks ALL properties)

Both orderBy and filter filters don't support the Object source out of the box. You either have to write a custom filter or covert it into Array (store each ID as another property) before pass it to filters. — runTarm
– runTarm, Commented Aug 9, 2014 at 19:28
this does not work Rob :( ty anyways If i convert it to an array how can i adress id's? e.g i link to other persons (father, mother and other relations) with persons.idxyz(.xyz) — easyX
– easyX, Commented Aug 9, 2014 at 19:41
Then please include more code of what you have tried e.g. how the relationships are stored and query. — runTarm
– runTarm, Commented Aug 9, 2014 at 19:52
until now the data isn't complete and i just startet. One thing i want to use is e.g. to check if the father has also a father property = then it's the grandfather (an i don't have to add grandfather as a property by myself) my ID's consist of the first 4 Letters+ length of the name + 0/1 (male/female) + A/B/C . .. if the ID would not be unique (this is useful if i want to use data from 1 person, because i know the name and anything else (just in rare cases i have to check which one i want A/B/C... ) i could do this with persons[index] of course but this wouldn't be very "clear" — easyX
– easyX, Commented Aug 9, 2014 at 20:21

sylwester · Accepted Answer · 2014-08-09 20:25:39Z

You can use toArrayfilter module more info please see here :http://ngmodules.org/modules/angular-toArrayFilter

and there sample demo for your solution http://jsbin.com/nimoxa/1/edit JS:

angular.module('angular-toArrayFilter', [])

.filter('toArray', function () {
  return function (obj, addKey) {
    if (!(obj instanceof Object)) {
      return obj;
    }

    if ( addKey === false ) {
      return Object.values(obj);
    } else {
      return Object.keys(obj).map(function (key) {
        return Object.defineProperty(obj[key], '$key', { enumerable: false, value: key});
      });
    }
  };
});

var app = angular.module('app', ['angular-toArrayFilter']);

app.controller('firstCtrl', function($scope){

  $scope.persons = {

    "IDabc": {
            name_de: "Markus",
            name_en: "Mark",
            age: 20,


        },
        "ID123": {
            name_de: "Andre",
            name_en: "Anrew",
            age: 30,
            description: "He is the father of xyz and . . .",



        },

        "IDxyz": {
            name_de: "Isaak",
            name_en: "Isaac",
            age: 23,


        }   

};

});

html:

body ng-app="app">
  <div ng-controller="firstCtrl">
<input ng-model="query" placeholder="Suche . . .">
<ul>
    <li ng-repeat="p in persons | toArray | orderBy:'age' | filter:query"> {{p.name_de}} -> {{p.name_en}} </li>
</ul>
      </div>
</body>

that looks great :) i will take a look but one last thing... if i search for "father" it stil shows Andrew .. because the filter checks all properties. How can i "ingnore" some properties?
@easyX ie: if you want search only for name_de use : filter:{'name_de':query}
and if i want to search for name_de AND name_en? (or any other combination)?
@easyX please see here stackoverflow.com/questions/13216115/…

ivan.sim · Accepted Answer · 2014-08-09 21:02:38Z

To answer your question on

It worked with an Array of persons, but i need the "ID's" so the object is necessary!?

can you include ID as a property of your person objects so that they will look like this?

$scope.persons = [
    { id: "ID123",
      name_de: "Andre",
      name_en: "Anrew",
      age: 30,
      description: "He is the father of xyz and . . .",
      . . .
    },
    { id: "IDabc",
      name_de: "Markus",
      name_en: "Mark",
      age: 20,
    },
         . . .
];

To search by name_de AND name_en (or any other properties for the matter), you can try writing your custom filter. It's fairly easy.

var app = angular.module("YourApp");
app.filter('MyCustomFilter', function(){
    return function(objects, criteria){
        if(!criteria)            
            return objects;

        var filterResult = new Array();
        for(var index in objects)
            if(objects[index].name_de.indexOf(criteria) != -1 || objects[index].name_en.indexOf(criteria) != -1)
                filterResult.push(objects[index]);
        return filterResult;
    }
});

Your HTML will look like this:

<input type="text" data-ng-model="personFilter" />
<div data-ng-repeat="person in persons | MyCustomFilter:personFilter"> ... </div>

i want to add properties like father:"id123" so i could do stuff like that: gradfather = persons[persons.IDabc.father].father i don't know how to do that with an array (without abstract index numbers) At the end i will have more then 1000 persons.. so i need a clear view
ok, in the case, what you did with the associative array is correct.

Collectives™ on Stack Overflow

How to use orderBy and filter with ng-repeat, using an object (instead of array)?

2 Answers 2

4 Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Linked

Related