Afficher des données provenant d'une BD mongoDb

**ph.bord** · 08/12/2013, 15h26

bonjour,
étant débutant sur angular, je peine à vouloir afficher des données d'une base de données mongoDb en REST, dans des pages web.
côté back, j'ai utilisé node.js (pas de souçis).
un message d'erreur s'affiche : TypeError: Cannot read property '0' of undefined
pourtant, j'ai suivi la procédure en me renseignant sur des sites.
j'ai essayé de plusieurs manières.
si quelqu'un veut bien m'aider à résoudre ce problème ? merci bien.

voici le 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
/*MongoDb => http://localhost:3000/skills (l'url fonctionne bien)*/
{
"skills": [
{
"_id": "5196666ae4b0988ed5cc4391",
"title": "Compétences techniques",
"items": [
{
"subtitle": "Langages",
"item": "JAVASCRIPT, AJAX, JSON, HTML5, CSS3, XML, PHP, SQL, SHELL",
"display": "1"
},
{
"subtitle": "Javascript client-side",
"item": "JQUERY, BACKBONE (notions), EMBERJS (notions)",
"display": "1"
}
...
]
}
]
}

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*app.js*/
'use strict';
angular.module( 'myApp', [
'ngRoute',
'myApp.filters',
'myApp.services',
'myApp.directives',
'myApp.controllers'
])
.config(['$routeProvider', function( $routeProvider) {
$routeProvider.when( '/home', {templateUrl: 'app/partials/home.html', controller: 'HomeController'});
$routeProvider.when( '/skills', {templateUrl: 'app/partials/skills.html', controller: 'SkillController'});
$routeProvider.otherwise({ redirectTo: '/home' });
}]);

Code :

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

1
2
3
4
5
6
7
8
9
/*service.js*/
'use strict';
angular.module( 'myApp.services', ['ngResource'])
.factory( 'SkillsService', [ '$resource', function( $resource) {
return $resource( '/skills', {}, {
query : { method:'GET', isArray : true },
get : { method:'GET' }
});
}]);

Code :

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

1
2
3
4
5
6
7
8
9
/*controller.js*/
angular.module( 'myApp.controllers', [])
.controller( 'HomeController', [function() {
 
}])
.controller( 'SkillsController', [ '$scope', 'SkillsService', function( $scope, SkillsService) {
var skillsBase = SkillsService.query().skills[0];
$scope.skills = skillsBase.items;
}]);

Code html :

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
<!--index.html-->
<!doctype html>
<html lang="fr" xmlns:ng="http://angularjs.org" ng-app="myApp" id="ng-app">
...
<body>
<div class="container" ng-view></div>
...
<script src="app/lib/jquery/jquery-2.0.3.min.js"></script>
<script src="app/lib/bootstrap/bootstrap.min.js"></script>
<script src="app/lib/angular/angular.js"></script>
<script src="app/lib/angular/angular-route.js"></script>
<script src="app/lib/angular/angular-resource.js"></script>
<script src="app/js/app.js"></script>
<script src="app/js/services.js"></script>
<script src="app/js/controllers.js"></script>
<script src="app/js/filters.js"></script>
<script src="app/js/directives.js"></script>
...
</body>
</html>

Code html :

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

1
2
3
4
5
6
7
<!--home.html-->
<div ng-controller="SkillsController">
<div ng-repeat="skill in skills">{{skill.item}}</div>
</div>
<div ng-include data-src="'app/partials/skills.html'"></div>
<!--si je supprime ng-controller="SkillsController",
il n'y a plus de messages d'erreurs mais aucune donnée ne s'affiche.-->

Code :

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

1
2
3
4
<!--skills.html-->
<div>
<div ng-repeat="skill in skills">{{skill.item}}</div>
</div>

**devyreham** · 11/12/2013, 01h25

Quand tu fais

SkillsService.query()

il y un appel asynchrone vers MongoDB. Ca prend un certain temps pour la machine.
Pendant ce temps très court, le controlleur lit immédiatement l'index 0.
A ce moment de l'execution il n'y a encore rien dans ton "skills". La donnée va se remplir seulement apres la requete base de donnée.

L'interêt de $resource est que tu n'a pas coder ce traitement de retour.
Une idée est de "data-bind" directement la reponse donc remplacer

var skillsBase = SkillsService.query().skills[0]

par

$scope.skillsBase = SkillsService.query()

dans le HTML faire une double boucle:
si l'objet contient 0 element Angular commentera la directive
ensuite il affichera le contenu du tableau -

Code :

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

1
2
3
4
5
 
 
<div ng-repeat="skills in skillBase">
       <div ng-repeat="skill in skills">{{skill.item}}</div>
</div>

Afficher des données provenant d'une BD mongoDb

AngularJS

Discussions similaires

Partager

Partager