load json in angularjs

Question

My code reads json formatted text inside the javascript code, I wish to read it from a json file. Here is my code, How can I change it for a file reading? I found that this code use parsing of json file, but how can I get thos to my variable $scope.Items ?

app
.controller('HomeController', function ($scope, $rootScope, $location, HomeService) {
    $scope.Items =  [{
    "Platform": "Plumbing",
    "Details": [{
        "Company": "School",
        "Cost": {
            "Days": 6,
            "Person": 5,
            "Cost": 100

        }
    }]
}, {
    "Platform": "Electrical Work",
    "Details": [{
        "Company": "School",
        "Cost": {
            "Days": 2,
            "Person": 4,
            "Cost": 200

        }
    }]
}, {
    "Platform": "Cleaning",
    "Details": [{
        "Company": "School",
        "Cost": {
            "Days": 1,
            "Person": 2,
            "Cost": 30
        }
    }]
}
}];
    $scope.GetItems = function () {
        HomeService.GetItems().then(function (response) {
            $scope.Items = response.data;
        }, function () { console.log("GetItems Failed !") });
    };
    //$scope.GetItems();
    $scope.cart1 = { Days: 0, Person: 0, Cost: 0 };
    $scope.cart2 = { Days: 0, Person: 0, Cost: 0 };

    $scope.AddCart = function (id) {
        angular.forEach($scope.Items, function (value, key) {
            if (value.Platform == id) {
                angular.forEach(value.Details, function (value1, key1) {
                    if (value1.Company == "School") {
                        $scope.cart1.Days += value1.Cost.Days;
                        $scope.cart1.Person += value1.Cost.Person;
                        $scope.cart1.Cost += value1.Cost.Cost;
                    }
                });
            }
        });
    };
})
.factory('HomeService', function ($http) {
    var serv = {};
    serv.GetItems = function (data) {
        return $http.post('http://www.Schoolsite.com/Items.json', data);
    };
    return serv;
});

Answer 1

Reading from file is an asynchronous operation in JavaScript - this means you have to check in some way if the file is loaded already or if isn't and work with the result only if this condition is true.

In JavaScript it is simple, just use promise or callback to work with data which are loaded asynchronously. If you need one way data binding the best option is to use directive ngIf and show the critical part of page only when data are already loaded.

The operation of reading JSON file itslef is done by internal Angular's service called $http. It should be something like this:

JS

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

      $scope.areItemsLoaded = false;
      $scope.Items = [];

      $http
         .get('myItems.json')
         .then(function (response) {
            $scope.Items = response.data;
            $scope.areItemsLoaded = true;

            // work with $scope.Items here
         });

      // [...] - the rest of your code
   });

HTML

<div ng-controller="HomneController">
   <div ng-if="!areItemsLoaded">
      Loading...
   </div>
   <div ng-if="areItemsLoaded">
      {{Items | json}}
   </div>
</div>