angularjs, Node.js, Postgresqlangularjs: Impossible d'afficher les propriétés de l'utilisateur dans la vue à l'aide ng de répétition et guidon
app.js:
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var pathfinderUI = require('pathfinder-ui');
var engines = require('consolidate');
var routes = require('./routes/index');
var users = require('./routes/users');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.engine('html', engines.mustache);
app.set('view engine', 'html');
// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', routes);
app.use('/users', users);
// pathfinder
app.use('/pathfinder', function(req, res, next){
pathfinderUI(app)
next()
}, pathfinderUI.router)
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// error handlers
// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: err
});
});
}
// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: {}
});
});
module.exports = app;
public/javascripts /user.js:
var app = angular.module('sendgrid-webhook', [])
app.controller('mainController', ($scope, $http) => {
$scope.formData = {};
// Get all users
$http.get('api/v1/users')
.then(function(response) {
$scope.userData = response.data;
console.log(response.data);
});
// Create a new todo
$scope.createUser =() => {
$http.post('/api/v1/users', $scope.formData)
.success((data) => {
$scope.formData = {};
$scope.userData = data;
console.log(data);
})
.error((error) => {
console.log('Error: ' + error);
});
};
// Delete a todo
$scope.deleteUser = (userID) => {
$http.delete('/api/v1/users/' + todoID)
.success((data) => {
$scope.userData = data;
console.log(data);
})
.error((data) => {
console.log('Error: ' + data);
});
};
});
index.html:
<!DOCTYPE html>
<html ng-app="sendgrid-webhook">
<head>
<title>SendGrid JS</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="//code.jquery.com/jquery-2.2.4.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
<script src="javascripts/app.js"></script>
</head>
<body ng-controller="mainController">
<div class="container">
<form>
<div class="form-group">
<input type="text" class="form-control input-lg" placeholder="Username" ng-model="formData.username">
<input type="text" class="form-control input-lg" placeholder="Email Address" ng-model="formData.email">
<input type="text" class="form-control input-lg" placeholder="Password" ng-model="formData.password">
</div>
<button type="submit" class="btn btn-primary btn-lg" ng-click="createUser()">Create User</button>
</form>
<div class="user-list">
<ul>
<li ng-repeat="user in userData"><input type="checkbox" ng-click="deleteUser(user.id)">
{{ user.username }}
</li>
</ul>
</div>
</div>
</body>
</html>
Réponse JSON:
[{"id":1,"username":"test","email":"[email protected]","password":"newpass"},{"id":4,"username":"First","email":"[email protected]","password":"test"},{"id":5,"username":"Tesing a third user","email":"[email protected]","password":"testing"}]
Console Objet du journal:
la ligne 6 de app.js, je fais un appel API à l'extrémité de l'utilisateur qui renvoie le tableau approprié des objets utilisateur . Cela est enregistré en tant que '$ scope.userData'. Quand j'étais débogueur pour vérifier la valeur de retour, j'obtiens un tableau de trois utilisateurs. Si vous regardez le index.html, vous pouvez voir les cases à cocher en cours de création pour chacun.
Sur la ligne 24 dans index.html je mets l'élément 'li' avec 'ng-repeat = "user dans userData"'. Dans chacun de ces éléments 'li', je souhaite afficher les propriétés d'un utilisateur avec {{user.username}}.
Ma vue parcourt le tableau d'objets utilisateur et crée le 'li' pour chacun d'entre eux, mais pourquoi le guidon n'affiche-t-il pas la propriété user.username que je demande?
EDIT:
It works in Plunker when I replace the AJAX call with the response data from the console
Mais la structure dir est différent aussi et le noeud ne participe pas.
S'il vous plaît intégrer votre code dans le message, et ne pas poster des photos de code. –
'log' le userData et vérifier la structure du json (beaucoup plus mieux si vous le collez dans la question) –
Qu'est-ce qui est dans le premier tableau? –