Firebase : Enregistrer un sous élèment Json en base de données

Invité · 14/11/2015, 14h56

Bonjour,

Je suis avec la base de données en ligne Firebase (Qui est géniale).
Hier j'ai passé plus de 4 heures à me casser la tête sur un problème insoluble.
je jette une bouteille à la mer, car je ne pense pas qu'on me répondra, mais qui sait.

Voilà, Mon but est d'enregistrer plusieurs appréciations par utilisateurs dans un tableau d'objets JSON.

Voici le format de mon modèle de données :

Code :

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

1
2
3
4
5
6
7
8
9
10
$scope.ajouterUtilisateur = function() {
 
					$rootScope.utilisateurs.$add({
					  nom:      $scope.nouveauNom,
					  prenom:   $scope.nouveauPrenom,
					  age:      $scope.nouvelAge,
					  email:    $scope.nouvelEmail,
					  appreciations:[ {"texte":$scope.nouvelleAppreciation}] 
					});
				};

Comme vous pouvez le constater, le tableau "appreciations" est un sous élèment du modèle de données utilisateurs.json.

Lorsque utilisateurs.json est modifié par l'application ANGULAR en Local, les modifications sont automatiquement répercutées dans ma base de données FIREBASE en ligne, c'est la liaison tridirectionelle, qui permet d'élaborer des applications partagées sans Back End (3 ways Binding), tout en angularJs+AngularFire.

Et lorsque dans mon application ANGULARJS, j'essaye d'ajouter une nouvelle appréciation avec son texte à la base de données FIREBASE, j'ai écrit ça :

Code html :

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

1
2
3
4
5
6
7
8
9
10
<ul>
	<li ng-repeat="appreciation in utilisateur.appreciations">
	<form ng-submit="utilisateurs.$add(appreciation)"> 
		<input ng-model="appreciation" />
		<button type="submit">Ajouter Message</button>
	</form>
		Appreciation :
		{{appreciation.texte}}
	</li>
</ul>

Mais cela ne mets pas la base de données à jour en temps réel.
$add est une fonction de ANGULARFIRE qui permet la liaison tridirectionnelle automatisée des données.
Elle marche très bien avec un modèle de données Simple, mais dans mon cas ce n'est pas simple puisque j'ai des sous-élèments dans mon modèle qui doivent s'ajouter dynamiquement(Les appreciations).

J'ai réussi à updater le tableau d'objets JSON utilisateurs.json en local, mais pas moyen que la base de données firebase se mette à jour, uniquement avec ce cas spécifique de "sous-modèle".

Pourtant, le reste du code marche bien et mets bien la base de données FIrebase à jour, mais cela ne fait pas réfèrence à un sous élèment de mon modèle utilisateurs.json:

Code html :

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

1
2
3
4
5
6
<input ng-model="utilisateur.$id" />		
			<input ng-model="utilisateur.nom" 		ng-change="utilisateurs.$save(utilisateur)" />
			<input ng-model="utilisateur.prenom"		ng-change="utilisateurs.$save(utilisateur)" />
			<input ng-model="utilisateur.age" 		ng-change="utilisateurs.$save(utilisateur)" />
			<input ng-model="utilisateur.email" 		ng-change="utilisateurs.$save(utilisateur)" />
		        <button class="myButton" ng-click="utilisateurs.$remove(utilisateur)">Supprimer L'utilisateur</button>

La seule piste que j'ai est de créer une fonction en Js avec ces méthodes, mais c'est difficile :https://www.firebase.com/docs/web/gu...ving-data.html

Qui sait, quelqu'un aurait peut être un exemple de 3 ways binding avec un sous élèment de modèle, utilisant FIREBASE+ANGULARJS ?

Invité · 14/11/2015, 22h44

C'est toujours moi, je rame toujours, j'ai réussi à faire ceci :

Code :

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

1
2
 
$rootScope.utilisateurs[0].appreciations.push({"texte":"test"});

Ca marche et ça ajoute bien une appréciation à un utilisateur, mais cela ne mets pas la base de données firebase à jour(Je vais voir si je ne peux pas transférer les données manuellement,

quand à cette instruction qui devrait fonctionner et qui sert au 3 ways binding(avec $add) :

Code :

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

1
2
 
$rootScope.utilisateurs[0].appreciations.$add({"texte":"test"});

Cela ne fonctionne absolument pas, alors que c'est suggéré par Firebase ! Par contre, si je fais ça :

Code :

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

1
2
3
4
5
6
7
$rootScope.utilisateurs.$add({
					  nom:      $scope.nouveauNom,
					  prenom:   $scope.nouveauPrenom,
					  age:      $scope.nouvelAge,
					  email:    $scope.nouvelEmail,
					  appreciations:[ {"texte":$scope.nouvelleAppreciation}] 
					});

ça marche ! c'est comme si on ne pouvait pas écrire dans un sous élèment de Json.

EDIT : Je viens de trouver un script particulièrement clair sur un Internet qui mets en place un 3 way binding avec une factory dédiée à Firebase, c'est assez clair, peut être que je pourrais mettre à jour mes sous élèments de modèle de données avec un code fait 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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
    <meta charset="UTF-8">
    <title>Angular Firebase</title>
    <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
<!-- CHARGEMENT DES LIBRAIRIES -->
 
			<!-- CHARGEMENT LIB ANGULAR -->
			<script type="text/javascript" src="angular-1.3.13/angular.min.js"></script>
			<script src="angular-route.min.js"></script>
			<script src="librairies/angular-locale_fr-fr.js"></script>
			<!-- CHARGEMENT LIB FIREBASE -->
			<script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
			<!-- AngularFire -->
			<script src="https://cdn.firebase.com/libs/angularfire/1.1.3/angularfire.min.js"></script>
			<!-- CSS DE L'APPLICATION -->  
			<link href="truc34.css" media="screen" rel="stylesheet" type="text/css" /> 
 
        <!-- FIN DE CHARGEMENT DES LIBRAIRIES -->
<script>
 
var app = angular.module('app', ['firebase']);
 
app.constant('FIREBASE_URI', 'https://blinding-heat-xxxx.firebaseio.com/testing/');
 
app.controller('MainCtrl', ['$scope', 'ItemsService', function ($scope, ItemsService) {
    $scope.newItem = { name: '', description: '', count: 0 };
    $scope.currentItem = null;
 
    $scope.items = ItemsService.getItems();
 
    $scope.addItem = function () {
        ItemsService.addItem(angular.copy($scope.newItem));
        $scope.newItem = { name: '', description: '', count: 0 };
    };
 
    $scope.updateItem = function (id) {
        ItemsService.updateItem(id);
    };
 
    $scope.removeItem = function (id) {
        ItemsService.removeItem(id);
    };
}]);
 
app.factory('ItemsService', ['$firebaseArray', 'FIREBASE_URI', function ($firebaseArray, FIREBASE_URI) {
    var ref = new Firebase(FIREBASE_URI);
    var items = $firebaseArray(ref);
 
    var getItems = function () {
        return items;
    };
 
    var addItem = function (item) {
        items.$add(item);
    };
 
    var updateItem = function (id) {
        items.$save(id);
    };
 
    var removeItem = function (id) {
        items.$remove(id);
    };
 
    return {
        getItems: getItems,
        addItem: addItem,
        updateItem: updateItem,
        removeItem: removeItem
    }
}]);	
 
 
</script>
 
</head>
<body ng-controller="MainCtrl">
<table class="table edit">
    <thead>
    <tr>
        <th>Nom</th>
        <th>Description</th>
        <th>Nombre</th>
        <th></th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="(id, item) in items">
        <td><input type="text" ng-model="item.name" 		ng-blur="updateItem(id)"/></td>
        <td><input type="text" ng-model="item.description" 	ng-blur="updateItem(id)"/></td>
        <td><input type="text" ng-model="item.count"		ng-blur="updateItem(id)"/></td>
        <td>
            <a href="#" ng-click="removeItem(id)" class="navbar-link">Supprimer</a>
        </td>
    </tr>
    </tbody>
</table>
 
<div class="well">
    <h4>Ajouter un Objet</h4>
 
    <form class="form-inline" role="form" novalidate ng-submit="addItem()">
        <div class="form-group">
            <input type="text" class="form-control" ng-model="newItem.name" placeholder="Nom">
        </div>
        <div class="form-group">
            <input type="text" class="form-control" ng-model="newItem.description" placeholder="Description">
        </div>
        <div class="form-group">
            <input type="text" class="form-control" ng-model="newItem.count" placeholder="Nombre">
        </div>
        <button type="submit" class="btn btn-default">Ajouter</button>
    </form>
</div>
 
 
</body>
</html>

Invité · 16/11/2015, 18h37

J'ai finalement trouvé un moyen à l'aide du dernier code posté, qui était bien mieux organisé que mon code personnel, en ajoutant un tableau de Json et des ng-repeat imbriqués, j'ai fait une micro-app permettant d'ajouter des élèments à mon tableau de Jsons dans mon modèle de données JSON global, et je confirme je viens d'essayer cela marche et Firebase se mets à jour en live avec le 3 way binding, en faisant un PUSH() puis en faisant un Update avec la factory de Firebase du dernier code que j'ai posté.

On peut constater que mon modèle de données $scope.newItem comprends un tableau "members" qui contient des objets JSON:

Code :

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

$scope.newItem = { name: "", description: "", count: "","members": [{"nom": "jose"},{"nom": "thierry"}]};

Voilà ma micro app : on voit donc que la factory dédiée à Firebase permet de mettre à jour en 3 ways binding la base de données, dans une application partagée Angular JS, sans avoir à coder de Back-end. (J'ai eu la flemme de traduire le code et les variables mais j'en ferais un autre en Français.

Testing :
http://nicolash.org/angular/truc36.html

Code :

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
    <meta charset="UTF-8">
    <title>Angular Firebase</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<!-- CHARGEMENT DES LIBRAIRIES -->
 
			<!-- CHARGEMENT LIB ANGULAR -->
			<script type="text/javascript" src="angular-1.3.13/angular.min.js"></script>
			<script src="angular-route.min.js"></script>
			<script src="librairies/angular-locale_fr-fr.js"></script>
			<!-- CHARGEMENT LIB FIREBASE -->
			<script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
			<!-- AngularFire -->
			<script src="https://cdn.firebase.com/libs/angularfire/1.1.3/angularfire.min.js"></script>
			<!-- CSS DE L'APPLICATION -->  
			<link href="truc34.css" media="screen" rel="stylesheet" type="text/css" /> 
 
        <!-- FIN DE CHARGEMENT DES LIBRAIRIES -->
<script>
 
var app = angular.module('app', ['firebase']);
 
app.constant('FIREBASE_URI', 'https://blinding-heat-xxxx.firebaseio.com/testing/');
 
app.controller('MainCtrl', ['$scope', 'ItemsService', function ($scope, ItemsService) {
   $scope.newItem = { name: "", description: "", count: "","members": [{"nom": "jose"},{"nom": "thierry"}]};
 
    $scope.currentItem = null;
	$scope.i = "nouveau";
    $scope.items = ItemsService.getItems();
 
    $scope.addItem = function () {
		ItemsService.addItem(angular.copy($scope.newItem));
		$scope.newItem = { name: '', description: '', count: 0 };// reinit du formulaire
    };
 
    $scope.updateItem = function (id) {
        ItemsService.updateItem(id);
    };
 
    $scope.removeItem = function (id) {
		ItemsService.removeItem(id);
    };
 
	$scope.addMember = function (id,i){
		$scope.items[id].members.push({"nom":i})
		ItemsService.updateItem(id);
	};
 
 
 
 
}]);
 
app.factory('ItemsService', ['$firebaseArray', 'FIREBASE_URI', function ($firebaseArray, FIREBASE_URI) {
    var ref = new Firebase(FIREBASE_URI);
    var items = $firebaseArray(ref);
 
    var getItems = function () {
        return items;
    };
 
    var addItem = function (item) {
        items.$add(item);
    };
 
    var updateItem = function (id) {
        items.$save(id);
    };
 
    var removeItem = function (id) {
        items.$remove(id);
    };
 
 
    return {
        getItems: getItems,
        addItem: addItem,
        updateItem: updateItem,
        removeItem: removeItem
    }
}]);	
 
 
</script>
 
</head>
<body ng-controller="MainCtrl">
<table class="table edit">
    <thead>
    <tr>
        <th>Nom</th>
        <th>Description</th>
        <th>Effectif</th>
 
 
        <th>Suppression</th>
		<th>Nouveau Membre</th>
		<th>Ajout Membres</th>
		<th>Membres</th>
 
    </tr>
    </thead>
		<tbody>
			<tr ng-repeat="(id, item) in items">
				<td><input type="text" ng-model="item.name" 		ng-blur="updateItem(id)"/></td>
				<td><input type="text" ng-model="item.description" 	ng-blur="updateItem(id)"/></td>
				<td><input type="text" ng-model="item.count"		ng-blur="updateItem(id)"/></td>
				<td><a href="#" ng-click="removeItem(id)" 			class="navbar-link">Supprimer		</a></td>
				<td><input type="text" ng-model="i"		/>{{i}}</td>
				<td><button class="btn btn-default" ng-click="addMember(id,i)">Ajouter membre</button></td>
				<td><span ng-repeat="membre in item.members">{{membre.nom}}<span>	
				</td>
 
			</tr>
		</tbody>
</table>
 
<div class="well">
    <h4>Ajouter une Classe</h4>
 
    Général:
	<form class="form-inline" role="form" novalidate ng-submit="addItem()">
        <div class="form-group">
            <input type="text" class="form-control" ng-model="newItem.name" placeholder="Nom">
        </div>
        <div class="form-group">
            <input type="text" class="form-control" ng-model="newItem.description" placeholder="Description">
        </div>
        <div class="form-group">
            <input type="text" class="form-control" ng-model="newItem.count" placeholder="Effectif">
        </div>
 
 
        <button type="submit" class="btn btn-default">Ajouter</button>
    </form>
</div>
 
 
</body>
</html>

On peut donc constater que j'ai fait un $scope.items[id].members.push({"nom":i}) dans mon tableau, contenu dans mon objet json global, synchronisé en live avec Firebase.

Firebase : Enregistrer un sous élèment Json en base de données

AngularJS

Discussions similaires

Partager

Partager