1

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>
3
  • Don't think you understand the asynchronous nature of ajax requests such as using $http. Study this answer/tutorial 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, 2016 at 0: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, 2016 at 0:39
  • okay, thank you for the link. Oct 13, 2016 at 1:44

1 Answer 1

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

2
  • Umm another question, what do I do if I want the button trigger to be on another web page? Oct 13, 2016 at 6: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, 2016 at 6:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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