Discussion :

[Hippocrène]

Bonjour,

j’aimerais savoir comment on peut récupérer un tableau contenu dans un fichier de configuration et l’insérer dans un ensemble à l’intérieur d’un contrôleur AngularJS.

J’ai besoin de créer un fichier, sûrement appelé config.js (mais je ne sais pas si il doit être « .js » ), et y ajouter une liste de pays que je pourrais rentrer dans un « $scope.pays = [ici la liste des pays]; ». Mais je ne sais comment m’y prendre.

Avez-vous une idée sur le sujet ?

[slim]

Salut!

Tu peux créer un fichier JSON et le lire avec le service $http.

[Hippocrène]

J’ai créé un fichier « config.json », contenant :

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
{
	"option":[
 
	{"id": "1", "name": "A", 
      "countries": [{"id": "1", "name": "FR", 
        "servers": [{"id": "1", "name": "Un"}, 
          {"id": "2", "name": "Deux"},
          {"id": "3", "name": "Trois"}]
      }]},
     {"id": "2", "name": "B",
      "countries": [{"id": "1", "name": "FR",
        "servers": [{"id": "1", "name": "Quatre"}, 
          {"id": "2", "name": "Cinq"}, 
          {"id": "3", "name": "Six"}]}, 
      {"id": "2", "name": "DE", 
        "servers": [{"id": "1", "name": "Sept"}, 
          {"id": "2", "name": "Huit"},
          {"id": "3", "name": "Neuf"}]
      }]}
 
      ]
 
  }

et mon implémentation $http :

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 module = angular.module('kibana.panels.custom', []);
 
  module.controller('custom', ['$scope', '$http', function ($scope, $http, dashboard, querySrv, filterSrv) {
 
     $scope.option = {};
 
     $http({
      method: 'GET',
      url: 'config.json'
     })
 
     .success(function (data, status, headers, config) {
    $scope.option = data;
 
    });
 
      $scope.selectedRequest = {};
      $scope.selectedRequest.option = $scope.option[0];
 
}]);

et mon html :

Code html :

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

1
2
3
4
5
6
7
8
<div ng-controller="custom" >
  <select name="site" ng-model="selectedRequest.site" ng-options="site.name for site in option" required></select>
  <select name="country" ng-model="selectedRequest.country" ng-options="country.name for country in selectedRequest.site.countries" required></select>
  <select name="server" ng-model="selectedRequest.server" ng-options="server.name for server in selectedRequest.country.servers"></select>
  <form>
    <input type="submit" value="OK">
  </form>
</div>

Mais ça ne fonctionne pas. Je pense que c’est au niveau du « $scope.option = data; » dans le « .succes » mais c’est aussi dû au « $http ».

[slim]

Mais ça ne fonctionne pas.

Est ce que tu as une erreur ou pas de résultat ?

Est ce que tu passe dans le success ? est-ce que l'instruction $scope.option= data; est exécutée ?
et est-ce que $scope.option ou data contiennent quelque chose ?

[Hippocrène]

En fait, je travaille sur un panneau personnalisé de Banana (une fourche de Kibana), et, quand le code est bon, je peut créer ce panneau dans mon interface de panneaux ; dans le cas contraire, il apparaît dans la liste, mais je ne peux pas le créer. Je suppose donc qu’il ne passe pas le succes. En effet, si je supprime

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
$http({
      method: 'GET',
      url: 'config.json'
     })
 
     .success(function (data, status, headers, config) {
    $scope.option = data;
 
    });
 
      $scope.selectedRequest = {};
      $scope.selectedRequest.option = $scope.option[0];

je peux à nouveau créer le panneau.

[slim]

tu m'excusera mais j'ai rien compris à ta réponse...

[Hippocrène]

Oui, je comprends, le sujet de Banana n’est pas simple (et peu connu).

En fait ma réponse voulait dire que je ne sais pas où est l’erreur, puisque je peux juste savoir si le programme n’a aucune erreur ou une ou plusieurs (par l’intermédiaire de la possibilité ou non de création de mon panneau). Et là, je ne peux pas le créer, ce qui veut dire qu’il y a une erreur (ou plusieurs) dans cette partie :

Code :

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

1
2
3
4
5
6
7
8
9
$http({
       method: 'GET',
       url: 'config.json'
      })
 
     .success(function (data, status, headers, config) {
         $scope.option = data;
 
     });

[slim]

Ajoute la méthode .error pour intercepter l'erreur s'il y en a, ou utilises then qui est mieux !

[Hippocrène]

Firebug me dit, entre autres « Error: Argument 'custom' is not a function, got undefined » (custom étant le nom de mon panneau) avec les chemins du fichier en dessous.

[slim]

custom étant le nom de mon panneau

Visiblement, "custom" est aussi le nom de ton contrôleur...

[Hippocrène]

Oui, autant pour moi, en fait c’est le nom de mon contrôleur et de mon panneau…

Le fait est que je dois avoir mal écris la fonction $http. J’en ai vu plusieurs, mais je ne sais pas si je dois utiliser la fonction $http.get, $http.jsonp ou $http.

[slim]

Code :

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

1
2
3
4
5
6
 
angular.module('myModule').factory('mainInfo', function($http) { 
    return $http.get('content.json').success(function(data) {
        return data;
    });
});

[Hippocrène]

Ne puis-je pas la mettre dans mon contrôleur ? car j’ai pas mal de variables dépendantes de ce fichier qui sont dans mon contrôleur (et que je me perd un peu facilement dans l’histoire des communications entre contrôleurs et assimilés).

J’ai testé ainsi (dans mon contrôleur):

Code javascript :

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

1
2
3
4
5
6
7
$scope.factory = function ($http) {
      return $http.get('config.json');
     }
 
 
      $scope.selectedRequest = {};
      $scope.selectedRequest.option = $scope.factory[0];

Le code ne bogue plus, mais il ne m’affiche pas les résultats dans mon select (sûrement dû à mon « $scope.factory[0] » qui ne devrait pas s’écrire exactement comme ça…).

[slim]

Code :

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

1
2
3
4
5
6
7
angular.module('app').controller('MyController', MyController);
MyController.$inject = ["$http"];
function MyController($http){
    $http.get('content.json').success(function(data) {
        $scope.content = data;
    });
}

mieux :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
(function() {
    'use strict';
    angular.module('app').controller('MyController', MyController);
    MyController.$inject = ["$http"];
    function MyController($http){
        var my = this;
        $http.get('content.json').success(function(data) {
            my.content = data;
        });
    }
})();

[Hippocrène]

Merci :) je vais lire le fichier « a potasser absolument par tout dev Angular qui se respecte » (message nº2) pour mieux comprendre comment utiliser ces fonctions, qui me font péter un câble, dans mon contrôleur.

[slim]

mieux :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
(function() {
    'use strict';
    angular.module('app').controller('MyController', MyController);
    MyController.$inject = ["$http"];
    function MyController($http){
        var my = this;
        $http.get('content.json').success(function(data) {
            my.content = data;
        });
    }
})();

Ceci dit, le $http.get doit être dans un service !

[Marco46]

Merci je vais lire le fichier « a potasser absolument par tout dev Angular qui se respecte » (message nº2) pour mieux comprendre comment utiliser ces fonctions, qui me font péter un câble, dans mon contrôleur.

Déplaces toute ta logique et toutes tes variables dans des services -> problem solved