AngularJS Bug affichage des datas

Charles Drd
Javascript

Bonjour, je suis débutant sur AngularJS et ai suivi les tutos,
cependant il y a un bug que je n'arrive pas à résoudre : comme dans le tuto mes données sont récupérées dans un fichier json, cependant parfois elles s'affichent, parfois non.
Plus précisément, lorsque j'arrive sur mon application en local et que j'accède à la page dans laquelle les données sont censées être affichées celles-ci ne se chargent pas, il faut que je revienne sur la page d'accueil et ré accède une nouvelle fois à la page pour qu'elles soient affichées.

Voici mon code :

fichier story.js (factory)

BiduleApp.factory('Story', function ($http, $q) {
        var factory = {
            storys : false,
            getStorys : function(){
                var deferred = $q.defer();
                if(factory.storys !== false){
                    deferred.resolve(factory.storys);
                }else{
                    $http.get('data/storys.json')
                        .success(function(data, status){
                            factory.storys = data;
                            deferred.resolve(factory.posts);
                        }).error(function(data, status){
                            deferred.reject('Impossible de récupérer les histoires');
                        })
                }
                return deferred.promise;
            },
            getStory : function(id){
                var deferred = $q.defer();
                var story = {};
                var storys = factory.getStorys().then(function(storys){
                    angular.forEach(storys, function(value, key){
                        if(value.id == id){
                            story = value
                        }
                    });
                    deferred.resolve(story);
                }, function(msg){
                    deferred.reject(msg);
                })
                    return deferred.promise;
                }
            };
            return factory;
        })

Fichier storys.js (controller) 

BiduleApp.controller('StorysCtrl', function($scope, Story, $routeParams){
    $scope.loading = true;
        $scope.storys = Story.getStorys().then(function(storys){
            $scope.loading = false;
            $scope.storys = storys;
        }, function(msg){
            alert(msg);
        })
    })

Fichier story.html (vue) 

<ng-include src="'partials/nav.html'"></ng-include>

<div id="storypage" class="col-lg-12">
<h1>La carte du monde</h1>
<h1>storys</h1>
    <div ng-controller="StorysCtrl">

        <div ng-repeat="story in storys">
            <p>
                <strong>{{storys.name}}</strong></br>
                {{story.id}}
            </p>
        </div>
    </div>
</div>

<ng-include src="'partials/footer.html'"></ng-include>

Fichier storys.json (données) 

{
        "id": 0,
        "isActive": true,
        "picture": "http://placehold.it/32x32",
        "name": "{{ \"[object Object]\" tag is not supported }}",
        "category": "{{ \"[object Object]\" tag is not supported }}"
    },
    {
        "id": 1,
        "isActive": false,
        "picture": "http://placehold.it/32x32",
        "name": "{{ \"[object Object]\" tag is not supported }}",
        "category": "{{ \"[object Object]\" tag is not supported }}"
    },
    {
        "id": 2,
        "isActive": false,
        "picture": "http://placehold.it/32x32",
        "name": "{{ \"[object Object]\" tag is not supported }}",
        "category": "{{ \"[object Object]\" tag is not supported }}"
    },
    {
        "id": 3,
        "isActive": true,
        "picture": "http://placehold.it/32x32",
        "name": "{{ \"[object Object]\" tag is not supported }}",
        "category": "{{ \"[object Object]\" tag is not supported }}"
    },
    {
        "id": 4,
        "isActive": false,
        "picture": "http://placehold.it/32x32",
        "name": "{{ \"[object Object]\" tag is not supported }}",
        "category": "{{ \"[object Object]\" tag is not supported }}"
    },
    {
        "id": 5,
        "isActive": true,
        "picture": "http://placehold.it/32x32",
        "name": "{{ \"[object Object]\" tag is not supported }}",
        "category": "{{ \"[object Object]\" tag is not supported }}"
    }
]

J'avoue être un peu désemparé et ne pas savoir par quelle bout prendre le problème.. Voyez-vous des choses étranges ?

Merci par avance.

1 réponse

xander

Yop essaye ceci :

BiduleApp.factory('Story', function ($http, $q) {

        var factory = {
            storys : false,
            getStorys : function(){
                var deferred = $q.defer();
                if(factory.storys !== false){
                    deferred.resolve(factory.storys);
                }else{
                    $http.get('data/storys.json')
                        .success(function(data, status){
                            factory.storys = data;
                            deferred.resolve(factory.posts);
                        }).error(function(data, status){
                            deferred.reject('Impossible de récupérer les histoires');
                        })
                }
                return deferred.promise;
            },
            getStory : function(id){
                var deferred = $q.defer();
                var story = {};
                    $http.get('data/storys.json')
                        .success(function(data, status){
                            story= data;
                            deferred.resolve(story);
                        })
                        .error(function(data, status){
                            //on réenvois un message d'erreur
                            deferred.reject('Impossible de récupérer les articles, ERROR 999');
                        });
               // }
          // });
            story = deferred.promise;// j'inclus mon retour de promesse dans mon objet story
            return story;// je return mon story
        }//fin de ma function getStory 
    }
    return factory;// je retourne mon objet factory
        })

ou simplement de modifier ton controller : 

BiduleApp.controller('StorysCtrl', function($scope, Story, $routeParams){
    $scope.loading = true;
        $scope.storys = Story.getStorys().then(function(storys){
            $scope.loading = false;
            $scope.storys = storys;
        }, function(msg){
            alert(msg);
        })
        $scope.story = Story.getStory().then(function(story){
            $scope.loading = false;
            $scope.story = story;
        }, function(msg){
            alert(msg);
        })
    })

sinon si sa ne fonctionne toujours pas pm me