$scope value not getting updated when used in $http

Question

I am trying to load a local json file and get the data in to a $scope variable.

myApp.controller('myController', ['$scope', '$http', function ($scope, $http) {

 $scope.menu = function () {
        $http.get('file.json')
            .then(function (data) {
                          $scope.menu=data.data.menu;  

            });
  };

Also I tried return data.data.menu. But not menu is not updating.

Tried caling this on page load.

$scope.menu();

In html:

<body ng-app="myApp">
    <div ng-controller="myController">
    <ul class="nav navbar-nav" ng-repeat="item in menu">
    // other stuffs

What is wrong here.

I Simply put the below code directly in the controller, but still not working.

 $http.get('file.json')
            .then(function (data) {
                          $scope.menu=data.data.menu;  

            });

https://stackoverflow.com/questions/16930473/angularjs-factory-http-get-json-file check these answers probably same issue — Panos K, Nov 24 '17 at 16:36
The $scope propery with the name `menu` is overloaded. The code uses it both as the name of a function and as the name of data for the View. — georgeawg, Nov 24 '17 at 21:04

score 1 · Answer 1 · answered Nov 24 '17 at 16:45

Try this:

myApp.controller('myController', [
    '$scope',
    '$http',
    function(
        $scope,
        $http
    )
    {
        $scope.menu = [];

        $scope.getItems = function()
        {
            $http.get('file.json')
            .then(function(response)
            {
                $scope.menu = response.data.menu;
            });
        };

        $scope.getItems();
    }
]);

Also, you need to make sure that file.json is served as a static file from the web server and has the following structure:

{
    "menu": []
}

$scope value not getting updated when used in $http

1 Answers1