Récupérer des données d'un fichier JSON sous android avec AngularJS

Version imprimable

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:

<list-Item></list-Item>

template :

Code:

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:

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:

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:

alert (SUCCESS A)

pour vérifier mais il affiche en premier

Code:

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:

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

Mon service :

Code:

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:

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

25/02/2016, 13h00
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); ?

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:

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:

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.

25/02/2016, 14h41
nemox31

Merci pour les conseils

Citation:

Envoyé par devwebsympa

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

Citation:

Envoyé par devwebsympa

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

Citation:

Envoyé par devwebsympa

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

Citation:

Envoyé par devwebsympa

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.
25/02/2016, 15h07
nemox31

Merci pour les conseils

Quelques remarques en passant :

Citation:

Envoyé par Marco46

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

oui j'ai enlevé

Citation:

Envoyé par Marco46

- 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.

Citation:

Envoyé par Marco46

- 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

Citation:

Envoyé par Marco46

- 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...
25/02/2016, 15h54
Marco46

Citation:

Envoyé par nemox31

Ok je vais me pencher sur controllerAs pour bien comprendre.

A lire absolument.

Citation:

Envoyé par nemox31

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.

C'est bon ! ça marche

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:

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:

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