javascript - Angular js does not get json response from node js -
i trying establish rest connection between node (middleware) , angular (ui). however, json displayed on browser rather being routed via angular controller/html
node/express router.js
router.get('/members', function(request, response){ response.header("access-control-allow-origin", "*"); response.header("access-control-allow-methods", "get, post"); response.setheader('content-type', 'application/json'); var dbdata = []; var str; db.get('_design/views555/_view/app_walltime', function (err, body) { if (!err) { body.rows.foreach(function(doc) { dbdata.push({name: doc.key, walltime:doc.value}); }); console.log(dbdata); response.json(dbdata); angular controllers.js
'use strict'; var phonecatapp = angular.module('phonecatapp', []); phonecatapp.config(['$httpprovider', function($httpprovider, $routeprovider, $locationprovider) { $httpprovider.defaults.usexdomain = true; delete $httpprovider.defaults.headers.common['x-requested-with']; } ]); phonecatapp.controller('phonelistctrl', function ($scope, $http, $templatecache) { alert('asdsad'); $scope.list = function() { alert('hereh'); var url = 'http://192.168.59.103:8072/members';// url node.js server running $http.get(url).success(function(data) { alert(data); $scope.phones = data; }); }; $scope.list(); }); html - testangular.js
<html ng-app="phonecatapp"> <head> <meta charset="utf-8"> <title>my html file</title> <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css"> <script src="/bower_components/angular/angular.js"></script> <script src="/bower_components/angular-route/angular-route.min.js"></script> <script src="js/controllers.js"></script> </head> <body ng-controller="phonelistctrl"> <div class="container-fluid"> <div class="row"> <div class="col-md-2"> <ul class="phones"> <li ng-repeat="phone in phones | filter:query"> {{phone.name}} <!--<p>{{phone.walltime}}</p> --> </li> </ul> </div> </div></div> what see following on browser
[{"name":"app1","walltime":"1050"},{"name":"app2","walltime":"30"}]
i seem missing configuration let node , angular communicate. please let me know doing wrong.
what see on browser's window json object, result of request.
with line $scope.phones = data;, you're assigning $scope of angular data object, without parsing it. result angular not able understand in ng-repeat directive {{phone.name}} , {{phone.walltime}} , json string shown.
in order have ng-repeat directive working expected, have parse first json object, process (creating example custom object , assigning properties) , assign $scope object.
you perform parse using json.parse(data);. please have @ this question further information.
or using angular's builtin function angular.fromjson(data).
an example this:
$http.get(url).success(function(data) { alert(data); $scope.phones = angular.fromjson(data); }); };
Comments
Post a Comment