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;
});

Why doesn't the code work? What are errors etc. you are getting? — Michael Rose
– Michael Rose, Commented Dec 10, 2015 at 10:57
Michael , the above code works fine, But I wanted to read the JSON from a file. Now I could values from json file. — Vinod
– Vinod, Commented Dec 14, 2015 at 6:59

Knut Holm · Accepted Answer · 2015-12-10 11:10:54Z

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>

Collectives™ on Stack Overflow

load json in angularjs

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related