get json object based on category

Question

i have json like this

[
  { 
    "id":1,
    "name": "BMW E46 PANDEM",
    "price": 130000,
    "curency":"USD",
    "color":"white",
    "category":"car"
  },
  { 
    "id":2,
    "name": "Yamaha",
    "price": 2000,
    "curency":"USD",
    "color":"white",
    "category":"Bike",
  },
  { 
    "id":3,
    "name": "Nissan GTR R34",
    "price": 130000,
    "curency":"USD",
    "color":"black",
    "category":"car"
  }
]

factory like this

angular
    .module('app')
    .factory('ItemFactory', ['$http', function($http)
        {
            return {
               get: function() {
                return $http.get('scripts/item.json').then(function(response) {
                    return response.data;
                });
               }
            };
        }
    ]);

controller

angular
    .module('app')
    .controller('apparelCtrl',['$scope','ItemFactory', function($scope,ItemFactory){
            $scope.title='car';
            ItemFactory.get().then(function(data) {
                $scope.apparelItems = data;
            });
            $scope.apparelItems=ItemFactory.get();
            console.log($scope.apparelItems);
        }]);

directive.js

angular
    .module('app.directives.gridViewApparel',[])
    .directive('gridApparel',function()
    {
        return{
            restrict:'E',
            scope:{
                data: '='
            },
            transclude:true,
            replace:true,
            templateUrl:"templates/directives/gridViewApparel.html",
            controller:function($scope){
                console.log($scope.data);
            }
        };
    }
);

diirective.html

<div>
    <div class="col-sm-4 ApparelThumbnail">
        <p class="title">{{data.name}}</p>
        <p>{{data.price}}{{curency}}</p>
        <a href="#/Apparel/{{data.id}}" class="btn btn-primary">detail</a>
    </div>
</div>

my car.html

<div class="container">
    <h1>{{title}}</h1>
    <div ng-repeat="carlItem in carItems | filter: {category:'car'}" class="">
        <grid-view-apparel data="carlItem"></grid-view-apparel>
    </div>  
</div>

both my car.html and bike.html got error

angular.js:14525 Error: [filter:notarray]

i try to add track by index before the filter but still got same error. how to get the object from json based on category guys? thank you

the error is possibly caused by `grid-view-apparel`. maybe you can make some extra explaination about the directive `grid-view-apparel` you are using. — Pengyy, May 16 '17 at 01:25
`$scope.apparelItems=ItemFactory.get();` <- get rid of this line — Phil, May 16 '17 at 01:46
@Phil oh its fixed. Thank you sir.whats wrong with that code. i thought i need to catch ItemFactory data — GerryofTrivia, May 16 '17 at 01:53
What you're doing there is assigning a `Promise` to `apparelItems` which is definitely **not** an array, hence the error `filter:notarray`. You're already calling `ItemFactory.get()` before that line which correctly sets `apparelItems` when it resolves so I'm not what you were thinking with that line. — Phil, May 16 '17 at 01:55

score 0 · Answer 1 · answered May 16 '17 at 07:52

The following code does not make any sense.

ItemFactory.get().then(function(data) {
    $scope.apparelItems = data;
});
$scope.apparelItems=ItemFactory.get();

Remove $scope.apparelItems=ItemFactory.get(); from your code, as you are overriding the $scope.apparelItems = data; from before, thus the $scope.apparelItems equals to a promise, not to a result of that promise.

score 0 · Answer 2 · edited May 23 '17 at 12:26

0

Your return is problem. Analyse what your returning is it repnse.data or promise. Understand $http response. Processing $http response in service

edited May 23 '17 at 12:26

Community

1
1

answered May 16 '17 at 08:19

Manikandan Velayutham

2,228
1
15
22

score 0 · Answer 3 · edited May 23 '17 at 12:03

0

thanks for Phil,

hes code fix the problem,

he suggested me to delete $scope.apparelItems=ItemFactory.get(); and now its fix

edited May 23 '17 at 12:03

Community

1
1

answered May 19 '17 at 00:26

GerryofTrivia

420
4
20

get json object based on category

3 Answers3