Iterate over JSON in Angular controller

Question

This service

angular.module('categoryService', ['ngResource']).
factory('Category', function($resource) {
    return $resource('data/categories.json');
});

reads this file:

[{"id":1,"name":"Close Reading","created_at":"2013-09-11T00:19:00.906Z","updated_at":"2013-09-21T13:21:05.123Z","subtitle":"Deliberate, careful reading will improve students’ grasp of every text."},{"id":2,"name":"Choosing Complex Texts","created_at":"2013-09-11T00:20:26.072Z","updated_at":"2013-09-21T13:21:07.698Z","subtitle":"What should your students be reading?"},{"id":3,"name":"Writing \u0026 Language","created_at":"2013-09-11T00:20:31.219Z","updated_at":"2013-09-21T13:21:08.008Z","subtitle":"What are the foundations of good written communication?"},{"id":4,"name":"Vocabulary","created_at":"2013-09-11T00:20:52.209Z","updated_at":"2013-09-21T13:21:08.824Z","subtitle":"Discover ways to expand students’ vocabulary."},{"id":5,"name":"Speaking \u0026 Listening","created_at":"2013-09-11T00:20:59.205Z","updated_at":"2013-09-21T13:21:09.744Z","subtitle":"Improve communication skills in your classroom."},{"id":6,"name":"Media Literacy \u0026 Technology","created_at":"2013-09-11T00:21:04.671Z","updated_at":"2013-09-21T13:21:10.042Z","subtitle":"Explore and apply the latest trends in digital media."},{"id":7,"name":"Differentiation","created_at":"2013-09-11T00:21:09.644Z","updated_at":"2013-09-21T13:21:10.363Z","subtitle":"Different students have different needs."},{"id":8,"name":"Reading Support","created_at":"2013-09-11T00:21:18.683Z","updated_at":"2013-09-21T13:21:10.820Z","subtitle":"Enrich your students’ reading experience."},{"id":9,"name":"Engagement \u0026 Motivation","created_at":"2013-09-11T00:21:35.022Z","updated_at":"2013-09-21T13:21:11.766Z","subtitle":"What makes students thirsty for learning?"},{"id":10,"name":"Performance Task Assessment","created_at":"2013-09-11T00:21:39.589Z","updated_at":"2013-09-21T13:21:12.107Z","subtitle":"Prepare students for the next generation of assessment."}]

and works as expected if I use

<li ng-repeat="category in categories" class="category-nav">

but I can't seem to access the single category inside the controller. I have tried the following:

function CategoryCtrl($scope, Category, $stateParams, _) {
  $scope.categories = [];
  $scope.categories = Category.query();
  /*
  $scope.category = _.where($scope.categories, {id: $stateParams.category_id};
  or      
  $scope.categories[$stateParams.category_id];
  or
  calling eval(), JSON.parse or angular.fromJson on $scope.categories
  */
}

I can't seem to get to the objects inside what looks like an array of objects. How do I get to $scope.categories[i] or similar inside the controller?

bingjie2680 · Accepted Answer · 2013-09-21 20:07:23Z

3

Use a callback function, when you fire the query method, it is asynchronized, so you have to do it when you get the response:

function CategoryCtrl($scope, Category, $stateParams, _) {
    $scope.categories = [];
    $scope.categories = Category.query(function (categories) {
        console.log(categories); //here you should see the data
        $scope.category = _.where(categories, {id: $stateParams.category_id};
    });
    console.log($scope.categories); //here you probably won't get the data
}

answered Sep 21, 2013 at 20:07

bingjie2680

7,7839 gold badges50 silver badges72 bronze badges

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

1 Comment

Rebel Over a year ago

I still have an issue, probably for the same reason, which I can't figure out. Now it works, but only if I stick in manually the id. If I call $scope.category = _.where(categories, {'id': $stateParams.category_id}) the response is empty, despite all the separate parts appearing to be there. Any further part that should be called in a callback?

Nitish Kumar · Accepted Answer · 2013-09-21 20:24:29Z

0

Try this

 angular.module('categoryService', ['ngResource'])
     .factory('Category', function($resource) {
            var temp = $resource('category.json', {},
                      {
                        get: {method:'GET', isArray:true},
                      });
                   return temp;                     
                });

Controller :

   function CategoryCtrl($scope, Category) {
       $scope.categories = [];
       Category.get({}, function(response) {
            $scope.categories =  response;
             console.log($scope.categories[0]);
        });
    }

DEMO

answered Sep 21, 2013 at 20:24

Nitish Kumar

4,8503 gold badges22 silver badges38 bronze badges

3 Comments

bingjie2680 Over a year ago

the Query method is a Get method in which isArray being true. you don't need to do this, man. you can find it on the $resource api reference page.

Nitish Kumar Over a year ago

by default, it is false

Magne Over a year ago

it is true by default for the .query method, if you use that instead of .get. Ref: docs.angularjs.org/api/ngResource/service/$resource

Collectives™ on Stack Overflow

Iterate over JSON in Angular controller

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related