Iterate over JSON in Angular controller - json

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?

Answer 1

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
}

Answer 2

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