web-dev-qa-db-fra.com

AngularJS: Comment charger des données JSON dans une variable de portée

Je crée un site Web personnel sur lequel je peux garder le contenu à jour sans devoir manipuler la variable HTML. J'essaie d'y parvenir simplement en chargeant et en mettant à jour un fichier JSON. Mais pour le moment, je ne parviens pas à charger les données JSON dans une variable 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
});

Voici à quoi ressemble le fichier JSON

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

J'ai en fait essayé de suivre la solution donnée ici , mais cela ne charge pas le fichier JSON stocké dans le même dossier. La sortie que je reçois provient de la fonction de traitement des erreurs qui dit Error: Cannot load JSON data comme mentionné.

Qu'est-ce que je fais mal?

EDIT: Je mets le même code sur plunker et cela fonctionne bien. Cela ne fonctionne tout simplement pas sur ma machine locale.

javascriptjsonangularjs
12
Divyanth Jayaraj

Modifié votre méthode Utilisez ceci et vérifiez la sortie.

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

ou une autre bonne pratique que je vois

Utiliser la méthode de service d'usine: -

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 

        }
    };
});

Injecter le service ci-dessus au contrôleur 

Manette :-

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

                 });
    });

Faites moi savoir si vous avez des questions . Bonne chance 

6
Prasad

Votre fichier json a un tableau avec le premier et unique élément du tableau étant un objet json. Lorsque .success() se déclenche et que des données sont transmises à la fonction lambda, les données sont un tableau, pas seulement JSON. Tout ce que vous avez à faire est d'accéder à l'élément zeroth du tableau.

Donc ça:

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

Devrait être ceci:

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

Aussi, vous devriez vérifier data[0] pour vous assurer que c'est bien JSON, et s'il ne valide pas, vous devriez probablement appeler parseJSON(data[0]) dessus.

5
EmmaGamma
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) {          
    });
});

Publié dans Web Server et ajouté le type Mime pour .json. Ça a marché.

2
Vanitha kumari

Je ne sais pas si vous avez toujours été en mesure de trouver la solution… .. Si ce n'est pas le cas, essayez ceci… .. Lorsque vous utilisez le serveur localhost, le serveur ne parvient pas à localiser les fichiers JSON… .. À résoudre Pour résoudre ce problème, il suffit de renommer votre fichier en mainContent.txt. En dehors de cela, votre code est parfait . Mais rappelez-vous qu’il s’agit uniquement de la phase de développement, lorsque vous envisagez de déployer le site en direct, revenez au fichier .json. .

demande $ http mise à jour: - 

$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"}];
    });
0
LIQvID

Modifiez vos fichiers mainController.js et JSON comme suit. Ici, j'utilise wamp server comme serveur local.

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

Fichier JSON: 

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