AngularJS: как загрузить данные JSON в переменную области видимости

Я создаю персональный сайт, на котором я могу обновлять контент без необходимости манипулировать HTML. Я пытаюсь достичь этого, просто загружая и обновляя файл JSON. Но прямо сейчас у меня возникают проблемы с загрузкой данных JSON на переменную scope.

HTML

<!doctype html>

<html>
    <head>
        <script src="angular.min.js" type="text/javascript"></script>
        <script src="maincontroller.js" type="text/javascript"></script>
    </head>
    <body>
        <div ng-app="mainApp" ng-controller="mainController">
            <div id="content">
                <div ng-repeat="content in contents">
                    <h2>{{content.heading}}</h2>
                    <p>{{content.description}}</h2>
                </div>
            </div>
        </div>
    </body>
</html>

maincontroller.js

var myapp = angular.module('mainApp', []);
myapp.controller('mainController',function($scope,$http){

    $scope.contents = null;
    $http.get('mainContent.json')
        .success(function(data) {
            $scope.contents=data;
        })
        .error(function(data,status,error,config){
            $scope.contents = [{heading:"Error",description:"Could not load json   data"}];
        });

    //$scope.contents = [{heading:"Content heading", description:"The actual content"}];
    //Just a placeholder. All web content will be in this format
});

Вот что выглядит файл JSON

[
    {"heading":"MyHeading","description":"myDescription"},
]

Я действительно пробовал следовать предложенному решению здесь, но не загружал файл JSON, хранящийся в той же папке. Результат, который я получаю, - это функция обработки ошибок, которая говорит Error: Cannot load JSON data, как упоминалось.

Что я делаю неправильно?

EDIT: я поместил тот же код в plunker, и он отлично работает. Он просто не работает на моей локальной машине.

Ответ 1

Модифицированный метод Используйте это и проверьте вывод.

var myapp=angular.module('mainApp',[]);
myapp.controller('mainController',function($scope,$http){
    $scope.content = null;
    $http.get('urlpath'}).
        success(function(data, status, headers, config) {
            $scope.contents=data;
        }).error(function(data, status, headers, config) {          
    });
});

или Другая хорошая практика Я вижу

Использовать Factory Метод обслуживания: -

angular.module('mainApp').factory('Myservice', function($http){
    return {
        getdata: function(){
              return $http.get('url'); // You Have to give Correct Url either Local path or api etc 

        }
    };
});

Внедрение сервиса в контроллер

Контроллер: -

angular.module('mainApp',[]).controller('mainController',function($scope,Myservice){
        $scope.content = null;
         Myservice.getdata().success(function (data){
                       alert('Success');
                   $scope.content=data[0]; // as per  emilySmitley Answer which is Working Good

                 });
    });

Позвольте мне знать, если у вас есть какие-либо вопросы. Удачи

Ответ 2

В вашем json файле есть массив с первым и единственным элементом в массиве, являющимся объектом json. Когда .success() срабатывает, и данные передаются в лямбда-функцию, данные представляют собой массив, а не только json. Все, что вам нужно сделать, это получить доступ к нулевому элементу массива.

Итак, это:

.success(function(data) {
    $scope.contents = data;
})

Должно быть:

.success(function(data) {
    $scope.contents = data[0];
})

Кроме того, вы должны проверить data[0], чтобы убедиться, что он json, и если он не проверяется, вы должны, вероятно, называть его parseJSON(data[0]).

Ответ 3

var myapp=angular.module('mainApp',[]);
myapp.controller('mainController',function($scope,$http){
    $scope.content = null;
    $http({method: 'GET', url: 'mainContent.json'}).
        success(function(data, status, headers, config) {
            $scope.contents=data;
        }).error(function(data, status, headers, config) {          
    });
});

Опубликовано на веб-сервере и добавлен тип Mime для .json. Это сработало.

Ответ 4

Измените файлы mainController.js и JSON следующим образом. Здесь я использую wamp-сервер в качестве локального сервера.

var myapp = angular.module('mainApp', []);
myapp.controller('mainController', function($scope, $http) {
  $http.get('http://localhost/stackoverflow/angular/test1/database.json').success (function(data) {
    $scope.contents = data.records;
  })
});

Файл JSON:

{
 "records":
 [
    {"heading":"MyHeading","description":"myDescription"}
 ]
}

Ответ 5

Я не знаю, смогла ли вы решить проблему или нет. Если нет, попробуйте это. При использовании сервера localhost сервер не может найти файлы json. Чтобы решить эту проблему, просто переименуйте файл в файл mainContent.txt, кроме того, ваш код будет идеальным. Но помните, что это только для фазы разработки, как только вы планируете развернуть сайт в прямом эфире, вернитесь к файлу .json.

обновленный запрос $http: -

$scope.contents = null;
$http.get('mainContent.json')
    .success(function(data) {
        $scope.contents=data;
    })
    .error(function(data,status,error,config){
        $scope.contents = [{heading:"Error",description:"Could not load json   data"}];
    });