загрузить json in angularjs

Question

Мой код читает json-форматированный текст внутри javascript-кода, я хочу прочитать его из json-файла. Вот мой код, как его изменить для чтения файла? Я обнаружил, что этот код использует синтаксический анализ json-файла, но как я могу получить его в моей переменной $ 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

Чтение из файла является асинхронной операцией в JavaScript - это означает, что вы должны проверить, каким-то образом, если файл будет загружен уже или нет и работать с результатом, только если это условие истинно.

В JavaScript просто, просто используйте обещание или обратный вызов для работы с данными, которые загружаются асинхронно. Если вам нужна привязка данных в одном направлении, лучшим вариантом является использование директивы ngIf и отображение критической части страницы только тогда, когда данные уже загружены.

Операция чтения файла JSON itslef выполняется с помощью внутренней услуги Angular, которая называется $http. Это должно быть что-то вроде этого:

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>