Converting JSON element into Javascript Array in AngularJS?

Question

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.

Community · Accepted Answer · 2017-05-23 10:32:16Z

2

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: https://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.

edited May 23, 2017 at 10:32

CommunityBot

11 silver badge

answered Mar 5, 2013 at 9:42

pkozlowski.opensource

117k60 gold badges329 silver badges286 bronze badges

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

4 Comments

LittleLebowski Over a year ago

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?

pkozlowski.opensource Over a year ago

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.

LittleLebowski Over a year ago

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 Over a year ago

For some strange reason, the Flot Chart doesn't plot itself. :( It works when I provide static data.

Collectives™ on Stack Overflow

Converting JSON element into Javascript Array in AngularJS?

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related