How to filter JSON Data with AngularJs

Question

i have json data, and i want it show by filter such as genre. Last question from How to filter JSON-Data with AngularJs? dont work to me.

myapp.js

var myApp = angular.module('myApp', []);

myApp.controller('myApp', function($scope) { 

$scope.isoffice = function(apps) {
    return apps[0].genre === "office";
};

$scope.apps = [
    {
  "id": "stardict",
  "genre": "aksesoris", 
  "name": "Stardict"
},
{
  "id": "libreoffice",
  "genre": "office", 
  "name": "LibreOffice"
}];
}

my index.html

<div ng-repeat="app in apps | filter:isoffice">
  {{apps[0].name}}
</div>

do i missing somethink? thank you..

apps[0].genre should be apps.genre

dandavis
– dandavis

2014-01-22 03:25:20 +00:00
Commented Jan 22, 2014 at 3:25 — dandavis
– dandavis, Commented Jan 22, 2014 at 3:25
wow, thanks.. it work to me. both of them.. :))

Estu Fardani
– Estu Fardani

2014-01-22 03:36:50 +00:00
Commented Jan 22, 2014 at 3:36 — Estu Fardani
– Estu Fardani, Commented Jan 22, 2014 at 3:36

KayakDave · Accepted Answer · 2014-01-22 03:36:33Z

8

You don't need a comparator function to do that filtering. You can use this:

<div ng-repeat="app in apps | filter:{genre:'office'}">
  {{app.name}}
</div>

Note that I use app.name to display the current app generated by ngRepeat. apps[0].name will repeatedly display the first entry (if multiple entries match your filter).

demo fiddle

If you want to use a comparator function, this will work (one object is sent in each time so you don't want to reference it as an array):

$scope.isoffice = function(apps) {
   return apps.genre === "office";
};

comparator demo

edited Jan 22, 2014 at 3:36

answered Jan 22, 2014 at 3:31

KayakDave

24.7k3 gold badges68 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rafael Ruiz Tabares Over a year ago

why if you do console.log(apps)the result is 4 object (2 for first row and 2 for second one)

Collectives™ on Stack Overflow

How to filter JSON Data with AngularJs

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related