Discussion :

[nemox31]

Bonjour,

J'affiche une liste et je veux récupérer les données d'un fichier JSON dans un SERVICE mais l'exécution de la lecture du fichier est trop long et je n'arrive pas à mettre à jour mon tableau items

j'affiche mes données dans mon template ci-dessous avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<list-Item></list-Item>

template :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<ion-view view-title="List test">
  <ion-content class="padding">
    <h3>List test</h3>
    <list-Item></list-Item>
  </ion-content>
</ion-view>

L'affichage pas par une directive et un template (j'utilise aussi ionic):

directive :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
app.directive('listItem', function() { 
   return { 
      templateUrl: 'views/directives/listItem.html',
      restrict : 'E',
      scope: true  
   }
})

template de ma directive :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<label class="item item-input item-stacked-label">
   <ion-list list-Item>
       <ion-radio ng-if="item.name" ng-repeat="item in items" ng-model="choice" ng-value="item.name"><b>{{item.name}} </b>- id: {{item.id}}</ion-radio>
   </ion-list>
 </label>

Mon controller appelle getItems où je récupère mon fichier et son contenu que j'affiche dans

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

alert (SUCCESS A)

pour vérifier mais il affiche en premier

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

alert (SUCCESS B)

avant, ce qui m'indique que l’exécution de ma lecture des données est trop longue. Du coup mon tableau items reste vide et je ne peux pas afficher ma liste.

Mon controller :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
app.controller('List', function ($scope,itemProvider) {
     $scope.items = itemProvider.getItems(); 
});

Mon service :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var items = [];
app.service('itemProvider', function($ionicPlatform,$cordovaFile) { 
    this.getItems = function () { 
              $ionicPlatform.ready(function () { 
                  // READ 
                 $cordovaFile.readAsText(cordova.file.dataDirectory, "test.json")
                   .then(function (success) { 
                       // success 
                       items = JSON.parse(success); 
                       alert("SUCCESS A : " + items); 
                   }, function (error) { 
                       // error 
                       alert("ERROR:" + error); 
                   });
              });
              alert("SUCCESS B : " + items);   
              return items; 
    } 
})

Si j'exécute la lecture du fichier à l'ouverture de l'application dans app.js ça marche, mon tableau items est bien initialisé... mais c'est pas logique de le faire ici (voir ci-dessous).

Quelqu'un peut-il m'aider à résoudre ce problème. Je débute sur AngularJS. Merci d'avance pour votre aide.

Solution qui marche mais qui n'est pas au bon endroit :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var app = angular.module('myApp', ['ionic', 'ngCordova'])
 
var items = [];
var dataFile = "test.json";
 
app.run(function ($ionicPlatform, $cordovaFile) {
    $ionicPlatform.ready(function () {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        if (window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if (window.StatusBar) {
            StatusBar.styleDefault();
        }
 
        $cordovaFile.readAsText(cordova.file.dataDirectory, dataFile)
            .then(function (success) {
                items = JSON.parse(success);
            }, function (error) {
                // error
                alert("ERROR : " + error);
            });
 
    });
})

[Invité]

Heu... Pour moi c'est normal qu'il affiche Success B en premier vu que Success A est dans la fonction de rappel .then qui est ,sauf erreur, asynchrone.
La console indique-t-elle un time out ou un fichier trop grand?

Que se passe-t-il si tu commente alert("SUCCESS B : " + items); dans ton service, obtiens-tu tes données Json ?

Peux tu mettre console.log() à la place de alert() ? C'est mieux pour visualiser les Json dans la console du navigateur.

T'as essayé sans faire un parse du Json à la ligne items = JSON.parse(success); ?

[Marco46]

Il te faut résoudre la promesse dans ton controleur. Si tu résous la promesse dans ton service c'est que tu veux y effectuer un traitement et tu devras ensuite renvoyer une autre promesse.

Du coup il te faut faire un truc comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
var items = [];
app.service('itemProvider', function($q, $ionicPlatform,$cordovaFile) { 
    this.getItems = function () { 
              var deferred = $q.defer();
 
              $ionicPlatform.ready(function () { 
                  // READ 
                 $cordovaFile.readAsText(cordova.file.dataDirectory, "test.json")
                   .then(function (success) { 
                       // success 
                       items = JSON.parse(success); 
                       deferred.resolve(items);
                   }, function (error) { 
                       // error 
                       deferred.reject(error);
                   });
              });
              alert("SUCCESS B : " + items);   
              return deferred.promise; 
    } 
})

Et dans ton contrôleur :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
app.controller('List', function ($scope,itemProvider) {
    itemProvider.getItems().then(
        function(data) () {
            $scope.items = data;
		}, function(error) {
			alert(error);
		});
});

Quelques remarques en passant :

- nul besoin d'un scope isolé dans ta directive.
- tes nommages ne sont pas bons, ils prêtent à confusion. list-item décrit-il une liste ou bien un item d'une liste ? Tu devrais avoir une directive pour décrire la liste (celle-là n'est pas nécessaire) et une autre décrivant un item d'une liste.
- pareil sur le nommage du service, un provider est un type de service bien précis (sert à configurer un service et ne s'exécute que dans la partie config d'un module), il ne devrait pas s'appeler itemProvider mais plutôt quelque chose comme itemData.
- n'utilise pas $scope, utilise la notation en controllerAs.

[nemox31]

Heu... Pour moi c'est normal qu'il affiche Success B en premier vu que Success A est dans la fonction de rappel .then qui est ,sauf erreur, asynchrone.
La console indique-t-elle un time out ou un fichier trop grand?

Non le fichier n'a que deux références, ce n'est pas une question de poids

Que se passe-t-il si tu commente alert("SUCCESS B : " + items); dans ton service, obtiens-tu tes données Json ?

alert("SUCCESS B : " + items) est vide

Peux tu mettre console.log() à la place de alert() ? C'est mieux pour visualiser les Json dans la console du navigateur.

Ok c'est un bon conseil

T'as essayé sans faire un parse du Json à la ligne items = JSON.parse(success); ?

Mon problème ne vient pas de là, mon JSON.parse(success) marche bien. dans le cas où je le passe dans l'app.js je récupère très bien ma liste.

[nemox31]

Quelques remarques en passant :

- nul besoin d'un scope isolé dans ta directive.

oui j'ai enlevé

- tes nommages ne sont pas bons, ils prêtent à confusion. list-item décrit-il une liste ou bien un item d'une liste ? Tu devrais avoir une directive pour décrire la liste (celle-là n'est pas nécessaire) et une autre décrivant un item d'une liste.

list-item décrit une liste de plusieurs items. C'est les datas que je récupère du fichier JSON que j'affiche.

- pareil sur le nommage du service, un provider est un type de service bien précis (sert à configurer un service et ne s'exécute que dans la partie config d'un module), il ne devrait pas s'appeler itemProvider mais plutôt quelque chose comme itemData.

Ok je vais modifier

- n'utilise pas $scope, utilise la notation en controllerAs.

Ok je vais me pencher sur controllerAs pour bien comprendre.


Merci je vais voir si ta solution marche avec mon code je te tiens au courant...

[Marco46]

Ok je vais me pencher sur controllerAs pour bien comprendre.

A lire absolument.

Merci je vais voir si ta solution marche avec mon code je te tiens au courant...

J'ai écrit directement dans developpez donc faudra surement faire des modifs de syntaxe.

[nemox31]

Finalement pas beaucoup de modif... juste une () à enlever et j'ai modifié le nommage pour tenir compte des remarques.
Et ça marche parfaitement... Je vais avancer sur mon code... certainement que j'aurai besoin d'un peu d'aide si je bloque.
Merci Marco46

Voilà le code qui marche :

Controller :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
app.controller('listData', function ($scope,itemData) {
    itemData.getData().then(
        function(data) {
            $scope.items = data;
		}, function(error) {
			alert(error);
		});
});

Service:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var items = [];
app.service('itemData', function($q, $ionicPlatform,$cordovaFile) { 
    this.getData = function () { 
              var deferred = $q.defer();
 
              $ionicPlatform.ready(function () { 
                  // READ 
                 $cordovaFile.readAsText(cordova.file.dataDirectory, "test.json")
                   .then(function (success) { 
                       // success 
                       items = JSON.parse(success); 
                       deferred.resolve(items);
                   }, function (error) { 
                       // error 
                       deferred.reject(error);
                   });
              });
              return deferred.promise; 
    } 
})