AngularJS ng-repeat filter by specific ID from JSON

Question

I cant seem to make this work. I've been trying to filter a JSON file by specific ID then iterate using ng-repeat.

here's what I've tried

here's the button trigger:

<a href="#/compare-details"><button class="viewDetails" ng-click="passID(11,02,00)" type="button">test button</button></a>

after passing the 3 id parameters, it goes to my controller:

var newData;
angular.module('handsetExplorerModule')
.controller("compareDetailsController", ['$scope','compareDetailsService', function($scope, compareDetailsService) {

   compareDetailsService.getHandsetList()
   .then(
       function(data){

         $scope.passID = function(id1,id2,id3){

             for(int i=0; i<data.phones.length; i++){
                if(data.phones[i].id == id1 || data.phones[i].id == id2 || data.phones[i].id == id3){
                     newData += data.phones[i];
                 }   
             }
         }
       }, 
       function(error){
           //todo: handle error
       }
    );

     $scope.phoneContent = newData;

}]);

JSON file came from service:

angular.module('handsetExplorerModule')
.factory('compareDetailsService', ['$http','$q', function($http, $q) {
   var service = {
   };
   service.getHandsetList = function(){
     var deferred = $q.defer();
      $http.get("./data/compareJSON.json").then(function(response) {
            deferred.resolve(response.data);
    },
        function(response){
            deferred.reject("ERROR: Unable to get handsetList data");
        }
    );
    return deferred.promise;
   };

   return service;
 }]);

and my ng-repeat

<div id="divContent">
            <div>
            <table id="Content"  ng-repeat="x in phoneContent">
            <tr>
                <td class="one">
                    <table>
                    <tr>
                        <td><img class="contImage" ng-src="{{x.image}}" ng-alt="{{x.name}}" /></td>
                        <td class="textAlign">{{x.name}} <button class="viewDetails" ng-click="viewDetails(x.id)" type="button">VIEW DETAILS</button></td>
                    </table>
                </td>   
                <td class="two">{{x.size}}</td>
                <td class="one">{{x.storage}}</td>
                <td class="two">{{x.camera}}</td>
                <td class="one">{{x.battery}}</td>
                <td class="two">{{x.network}}</td>
                <td class="one">{{x.sim}}</td>
            </tr>
            </table>
            </div>      
</div>

Don't think you understand the asynchronous nature of ajax requests such as using `$http`. Study [this answer/tutorial](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) closely. It is one of the most linked to answers in javascript tag on this site. Your controller needs to be completely restructured — charlietfl, Oct 13 '16 at 00:36
Get all your data and store it...then when button is clicked go through and filter it in separate operation. Or wait for button click to get data ..then filter response....you have a hodge podge mixture of both approaches that should be throwing errors — charlietfl, Oct 13 '16 at 00:39

score 0 · Accepted Answer · answered Oct 13 '16 at 01:15

0

please check refactored a little bit plunker: http://plnkr.co/edit/paPSj8Dm4Z1RCbFw9FmS?p=preview

BTW, $http service by its self is a Promise, so no need to use $q service, just return $http:

myApp.factory('compareDetailsService', ['$http', function($http) {
  return {
    getHandsetList: function(){
      return $http.get("data.json");
    }
  };
}]);

there is a very similar tutorial, you should look at: https://docs.angularjs.org/tutorial/step_00

answered Oct 13 '16 at 01:15

Andriy

14,781
4
46
50

Umm another question, what do I do if I want the button trigger to be on another web page? – Maylin Anne Oct 13 '16 at 06:03
you can create a service or factory, which is a singleton and thus shared among all pages. In this service you can store a list of IDs that you want to filter your table with. Now, on another page, you set desired IDs and redirect user to the page with your table, which will filter data with stored list of IDs (if this list is set) – Andriy Oct 13 '16 at 06:38

AngularJS ng-repeat filter by specific ID from JSON

1 Answers1