Can I change which JSON file is loaded by sending a variable to AngularJS?

Question

I would like to load the content of one of two JSON files, food1.json or food2.json. I am trying to do this from the html template:

  <body ng-controller="MainCtrl" ng-init="init('food1')">

And then in the JS:

$scope.init = function (name) {
    $scope.name = name;
    $scope.category = name + ".json";
    $scope.foodlist = {};
    $http({
        method: 'GET',
        url: $scope.category,
    }).success(function (data, status, headers, config) {
        {
            $scope.foodlist = data;
        }
    }).error(function (data, status, headers, config) {
        // something went wrong :(
    });
};
});

The category name is properly assembled: I get "I am food1" if I print I am {{ category }}. But no food items are printed. I think I am doing the JSON call wrong.

Here's my Plunkr

use a console to look at errors...$http undefined error should have been a clue to problem — charlietfl
– charlietfl, Commented Oct 31, 2013 at 12:58
Plunkr dumps a lot of errors to the console in Chrome, so I haven't been using it in these experiments, but you're right. — Ila
– Ila, Commented Oct 31, 2013 at 13:13
Yes, that is true. But looking for console errors is not as useful if the console is full of, e.g " Uncaught SecurityError: Blocked a frame with origin "run.plnkr.co" from accessing a frame with origin "plnkr.co". Protocols, domains, and ports must match. Failed to load resource: the server responded with a status of 404 (Not Found) run.plnkr.co/7OJ6MtOoaLlT549f/plunkerPreviewTarget.json Uncaught SecurityError: Blocked a frame with origin "run.plnkr.co" from accessing a frame with origin "plnkr.co". Protocols, domains, and ports must match." — Ila
– Ila, Commented Oct 31, 2013 at 13:39

Satpal · Accepted Answer · 2013-10-31 12:14:40Z

1

You have not injected $http in the controller. Change you code as

app.controller('MainCtrl', function($scope, $http) {

instead of

app.controller('MainCtrl', function($scope) {

DEMO

answered Oct 31, 2013 at 12:14

Satpal

134k13 gold badges168 silver badges171 bronze badges

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

Collectives™ on Stack Overflow

Can I change which JSON file is loaded by sending a variable to AngularJS?

1 Answer 1

DEMO

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related