Join the Stack Overflow Community
Stack Overflow is a community of 6.9 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite

I'm using AngularJS to make a $resource call to GET some values in JSON format. My requirement is that I've a model element that needs a Javascript array of the form:

[
[1328983200000, 40],
[1328983200000, 33], 
[1328983200000, 25],
[1328983200000, 54],
[1328983200000, 26], 
[1328983200000, 25]
];

to be displayed in Flot charts. This information is contained in the JSON as follows:

{
"marks1":15,
"marks2":20,
"dailyMarks":{
"2013-02-27T07:25:35.000+0000":40,
"2013-03-01T07:25:35.000+0000":33,
"2013-02-26T07:25:35.000+0000":25,
"2013-02-23T07:25:35.000+0000":54,
"2013-03-03T10:12:59.000+0000":26,
"2013-03-02T07:12:59.000+0000":25},
}

where "dailyMarks" contain the elements I need. I can convert "dailyMarks" to Javascript array, but it doesn't seem to work: (Below is my Controller code)

function MyController($scope, $resource) {

    var User = $resource('/marks/fetch?from=:from&to=:to', {from: inStartDate, to: inEndDate}, {
        getAll: {method: 'GET', isArray: false}
    });

    $scope.changeDate = function(fromDate, toDate) {
        $scope.marks = User.getAll({from: fromDate, to: toDate});
    };
    var imarks = User.getAll();
    $scope.marks = imarks;

    var list = imarks.dailyMarks, arr = [];

    for (var key in list) {
        arr.push([+new Date(key), list[key]]);
    }

    $scope.myModel = arr;
};

What am I doing wrong? I get blank arr[] in the model. :( :( Kindly guide me.

share|improve this question
up vote 2 down vote accepted

The problem here is that the $resource service is asynchronous even if its API might suggest that it is synchronous. This answer has more details regarding this topic: http://stackoverflow.com/a/11966512/1418796

What you should do is to move your array post-processing to a success callback of a call to the resource, something along those lines:

function MyController($scope, $resource) {

    var User = $resource('/marks/fetch?from=:from&to=:to', {from: inStartDate, to: inEndDate}, {
        getAll: {method: 'GET', isArray: false}
    });


    $scope.marks = User.getAll({from: fromDate, to: toDate}, function(marksFromServer){
      //post processing <-- goes HERE
    }
);
};

Other remark - you are constantly re-defining the User resource in a controller, you should rather move it to a factory and inject User to your controller.

share|improve this answer
    
With the code shared by me, I'm getting value in $scope.marks & can display it properly. That part is working. But I don't get anything in "myModel" Why is it so? – LittleLebowski Mar 5 '13 at 9:54
    
This is exactly the same problem of an async call. You've got this code: var imarks = User.getAll(); which returns immediatelly with an empty array. You need to do your processing in a callback. – pkozlowski.opensource Mar 5 '13 at 9:56
    
Oh..I see. Got it. Thanks a lot for the awesome explanation. I already spent almost 30 minutes racking my brains apart on what's wrong! Thanks a lot for showing the way!! :) – LittleLebowski Mar 5 '13 at 10:00
    
For some strange reason, the Flot Chart doesn't plot itself. :( It works when I provide static data. – LittleLebowski Mar 5 '13 at 11:31

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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