Angularjs - multiple json array not working properly

Question

I'm having this little app, requesting the json file which works fine when using one level json, below code that works:

service:

angular
    .module ('myApp')
    .factory('Summary', function ($resource) {
        return $resource('summary.json');
    });

controller:

angular
    .module ('myApp')
    .controller ('summaryCtrl', ['$scope', 'poller','Summary', function ($scope, poller,Summary) {

        var poller1;
        //using angular-poller 
        poller1 = poller.get(Summary, {delay: 2000});
        poller1.promise.then(null, null, function (data) {
            $scope.summary = data;
            console.log(data);
        });
    }]);

json:

[
    {"channel": "aaa", "value": 13256},
    {"channel": "bbb", "value": 6598},
    {"channel": "ccc", "value": 245 },
    {"channel": "ddd", "value": 123},
    { "channel": "eee", "value": 956},
    { "channel": "fff", "value": 142}
]

output in console:

[Resource, Resource, Resource, Resource, Resource, Resource, $promise: Object, $resolved: true]

All that above works fine as I'm getting 6x Resource, as soon as I introduce multilevel json and amend the controller it is not working properly, below is new code where I'm trying to retrieve uk:

new json:

[
    {
        "uk": [
            {"channel": "aaa", "value": 13256},
            {"channel": "bbb", "value": 6598},
            {"channel": "ccc", "value": 245 },
            {"channel": "ddd", "value": 123},
            { "channel": "eee", "value": 956},
            { "channel": "fff", "value": 142}
        ]
    },
    {
        "us": [
            {"channel": "aaa", "value": 457},
            {"channel": "bbb", "value": 364},
            {"channel": "ccc", "value": 457 },
            {"channel": "ddd", "value": 45},
            { "channel": "eee", "value": 3},
            { "channel": "fff", "value": 143562}
        ]

    }
]

controller:

angular
        .module ('myApp')
        .controller ('summaryCtrl', ['$scope', 'poller','Summary', function ($scope, poller,Summary) {

            var poller1;
            poller1 = poller.get(Summary, {delay: 2000});
            poller1.promise.then(null, null, function (data) {
                $scope.summary = data.uk; //here I need to get uk data
                console.log(data.uk);
            });
        }]);

output in console is undefined

What am I doing wrong here? Many thanks for your help.

Oh wow, silly me :) Many thanks for your help. However, what it would look my code like if data were a proper json format/objects rather than array? — angular_learner
– angular_learner, Commented Aug 6, 2014 at 13:25
It's still proper json, you would just remove the surrounding "[" and "]". So it would look like {"uk":[]} instead of [{"uk":[]}] — KJ Price
– KJ Price, Commented Aug 6, 2014 at 13:27
I've tried that by removing [] so it looks {"uk":[]},{"us":[]} but my IDE argue that there is an error which is comma in between them :( — angular_learner
– angular_learner, Commented Aug 6, 2014 at 13:37

KJ Price · Accepted Answer · 2014-08-06 13:43:48Z

0

Change the format of your json to look like this:

{
    "uk": [
        {"channel": "aaa", "value": 13256},
        {"channel": "bbb", "value": 6598},
        {"channel": "ccc", "value": 245 },
        {"channel": "ddd", "value": 123},
        { "channel": "eee", "value": 956},
        { "channel": "fff", "value": 142}
    ],
    "us": [
        {"channel": "aaa", "value": 457},
        {"channel": "bbb", "value": 364},
        {"channel": "ccc", "value": 457 },
        {"channel": "ddd", "value": 45},
        { "channel": "eee", "value": 3},
        { "channel": "fff", "value": 143562}
    ]

}

Then data.uk and data.us will produce the desired results.

answered Aug 6, 2014 at 13:43

KJ Price

6,0143 gold badges23 silver badges36 bronze badges

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

1 Comment

angular_learner Over a year ago

Brilliant, all I had to to work with your solution was to amend factory like this: return $resource('summary.json',{}, {'query': {method: 'GET', isArray: false}}); Many thank again!

Collectives™ on Stack Overflow

Angularjs - multiple json array not working properly

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related