current community

your communities

more stack exchange communities

Stack Exchange Inbox Reputation and Badges
tour help
stack overflow careers
Sign up ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free.
up vote 1 down vote favorite

I'm having trouble with filtering JSON entries by defined categories with a select option element. Any help is much appreciated.

What my App should do:

  1. Load JSON data from file by http.get (working)
  2. The JSON data contains a job title and a job category (and other data) for each entry
  3. Read each of these entries from JSON into a list-tag on html (working)
  4. filter this list by a job category by a select option element (not working)

I guess the problem lies somewhere in my controller function. But I'm quite new to angularjs so I couldn't find out what the problem is... Any help is much appreciated.

first two entries of my JSON file with the tag "categories" in it:

   [{
    "jobtitle":"Multimedia Producer",
    "name":"A. Text",
    "shortname":"atext",
    "shortdescription":"Werbeagentur",
    "team":"XXX",
    "lookingfor":"XXX",
    "jobdescription":"XXX",
    "portfolio":"XXX",
    "contact":"XXX" ,
    "categories":"none"
   },
   {
    "jobtitle":"Kameraassistent",
    "name":"Movie & Art",
    "shortname":"movie_art",
    "shortdescription":"Corporate Movies and more...",
    "team":"XXX",
    "lookingfor":"XXX",
    "jobdescription":"XXX",
    "portfolio":"XXX",
    "contact":"XXX",
    "categories":"photography"  
   }]

The controller.js:

var myApp = angular.module('myApp', []);
myApp.controller('MyController', ['$scope', '$http', function ($scope, $http){
    $http.get('js/data.json').success(function(data){
    $scope.jobs = data;
    $scope.catchange = 'categories'
    }); 
}]);

Part of the HTML-page setup with the select option element:

<div ng-controller="MyController">
    <span class="input">
        <select ng-model="catchange" class="cs-select cs-skin-underline">
            <option value="none">Suche nach Kategorien</option>
            <option value="photography">Fotografie</option>
            <option value="text">Text</option>
            <option value="digital">Digital</option>
            <option value="print">Print</option>
            <option value="consulting">Beratung</option>
            <option value="advertising">Werbung</option>
            <option value="socialmedia">Social Media</option>
            <option value="strategy">Strategie</option>
            <option value="conception">Konzeption</option>
            <option value="film">Film</option>
            <option value="tv">TV</option>
        </select>
    </span>
</div>

<div class="searchlisting" ng-controller="MyController">
    <ul class="portfolio-grid">    
        <li class="grid-item" ng-repeat="item in jobs | filter: catchange" data-jkit="[show:delay=300;speed=500;animation=fade]">
            <img ng-src="img/searchlist/{{item.shortname}}_tn.jpg" alt="Photo of {{item.name}}">
            <a class="ajax-link" href="single.html">  
                <div class="grid-hover">
                    <h1>{{item.jobtitle}}</h1>
                    <p>{{item.name}}</p>
                </div>
            </a>  
        </li>
    </ul>
</div>

Many thanks for any help.

Cheers

share|improve this question
    
I don't understand what this line is supposed to represent? $scope.catchange = 'categories'. you are essentially setting your filter to a string 'categories', which isn't even a valid option in the select list. –  Claies Aug 4 at 14:15
    
Yes I think thats the problem. Thank you Claies. How can I fix this, that it takes the corresponding entry? Sorry - I'm new to angular... –  guidokocht Aug 4 at 14:24
    
What it supposed to do: User selects on the select list one of the entries (categories) and angular will then only show the corresponding entries (=categories-tag) from the JSON file. guidokoch.ch/jobplattform/jobsuche.html –  guidokocht Aug 4 at 14:27
    
ok, let's break down what it is you are trying to do a bit here. your service is fetching a list of jobs, and you want to filter them based on the dropdown. why would you even need to set the value of the dropdown to anything the moment you receive your data? –  Claies Aug 4 at 14:28
    
Ok, after reloading my browser, I could use the dropdown; however checking the console, your service appears to be throwing a 404 fetching your data, and doesn't have anything to filter. –  Claies Aug 4 at 14:33

2 Answers 2

up vote 0 down vote accepted

catchange will be a string, and when you filter, you are iterating over each object that is a job. So really, you need to be comparing each job.categories against catchange model.

Therefore, when you are doing filter:catchange, you are comparing each job object against the selected string in catchange, where you need to be comparing job.categories to catchange. You can tell angular what to track an iterator by to make sure it is comparing, or you can do the following:

Write a filter function that returns a boolean. This is just one way

this will be the filter in the view, angular passes each job as a param

filter: filterCategory

This will be a function in your controller that needs to compare the incoming job category with the categories that need to be filtered out. Just have it return a boolean. 

$scope.filterCategory = function(job){
    return $scope.catchange.filter(category){
      job.categories === category
    }
}

edit: Above assumes multi-select options, where catchange is an array of selected options stored via string. If it only ever going to be a single category select then 

$scope.filterCategory = function(job){
    if($scope.catchange){
        return job.categories === $scope.catchange
    } 
    else {
        return true
    }
}
share|improve this answer
    
Thank you Georgette for answering and your explanation. I'm getting a sense of what I'm doing wrong... Somehow, your notation gives me a syntax error - so my controller is now looking like this: var myApp = angular.module('myApp', []); myApp.controller('MyController', ['$scope', '$http', function ($scope, $http){ $http.get('js/data.json').success(function(data){ $scope.jobs = data; $scope.filterCategory = (function(job){ return job.categories === catchange }); }); }]); –  guidokocht Aug 4 at 15:12
    
hard to read that, but I did have a syntax error ( used : instead of = when declaring function). See above fix. –  Georgette Pincin Aug 4 at 15:27
    
Thank you for the fix! I'm not getting to solve the problem though - can I ask you for help again? I stripped all the css and other js away from the page to see if something interferes the app. But it doesn't. So I uploaded the this stripped version on my server here: link Can you take a look at it? Thank you so much! –  guidokocht Aug 4 at 17:01
    
Ok the the console in my browser says that 'catchange' isn't defined. I guess I need to define it in the controller - but how? –  guidokocht Aug 4 at 17:06
    
Just initialize it to empty string: $scope.catchange = ''; Then when a user actually selects an option in the dropdown, $scope.catchange will capture the value and then angular will detect the model change and refilter. –  Georgette Pincin Aug 4 at 17:51
up vote 0 down vote

Try specifying the property name that you want filter:

<li class="grid-item" ng-repeat="item in jobs | filter: {categories: catchange}" data-jkit="[show:delay=300;speed=500;animation=fade]">
share|improve this answer
    
Thank you very much. I tried it, but it didn't help. Link to the full page: guidokoch.ch/jobplattform/jobsuche.html –  guidokocht Aug 4 at 14:18

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.