javascript - Angular.js: Unable to display user properties in the view using ng-repeat and handle-bars -

-

angular.js, node.js, postgresql

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 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 , forward error handler app.use(function(req, res, next) {   var err = new error('not found');   err.status = 404;   next(err); });  // error handlers  // development error handler // 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 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 = {};   // users   $http.get('api/v1/users')     .then(function(response) {       $scope.userdata = response.data;       console.log(response.data);     });     // create 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 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>

json response:

[{"id":1,"username":"test","email":"test@test.com","password":"newpass"},{"id":4,"username":"first","email":"first@gmail.com","password":"test"},{"id":5,"username":"tesing third user","email":"newemail@gmail.com","password":"testing"}]

console log object:

userdata object in console

on line 6 in app.js, making api call users endpoint returns proper array of user objects. saved '$scope.userdata'. when debugger check in return value array of 3 users. if @ index.html, can see checkboxes being created each.

on line 24 in index.html setting 'li' element 'ng-repeat="user in userdata"'. within each of 'li' elements, wish display user's properties {{ user.username }}.

my view iterating on array of user objects, , creating 'li' each them, why handlebars not displaying user.username property requesting?

edit:

it works in plunker when replace ajax call response data console

but dir structure different , node isn't involved.

i figured out problem was.

app.use(express.static(path.join(__dirname, 'public')));

i serving view form /views folder. now, html being served browser fine, but, because of way express serves static assets angular(?), needed move index.html view public folder in file tree. drag , drop, , {{ }} notation works fine.

thanks anyone. if clarification, let me know!

ps: post everything, dir struct on q&a, have helped me here.


Comments

Post a Comment