Angular js does not get json response from node js

Question

I am trying to establish REST connection between node (middleware) and angular (UI). However, the json is displayed on the browser rather than being routed via the 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 where the Node.js server is 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 is see is the following on the browser

[{"name":"app1","walltime":"1050"},{"name":"app2","walltime":"30"}]

I seem to be missing some configuration to let node and angular communicate. Please let me know what I am doing wrong.

@Alberto - Thanks. I tried that too, still the same json displayed on browser. What worries me is that the alert message inside the angular controller does not display either. — user1384205, Aug 03 '15 at 08:27
@Kram. Thanks. I added a console log to both the sucess and failure cases like the following. But nothing gets printed on the console. $http.get(url).then( function(response) { console.log('success',response); }, function(data) { console.log('erro',response); }) — user1384205, Aug 03 '15 at 08:29

score 1 · Accepted Answer · edited May 23 '17 at 10:26

1

What you see on the browser's window is a JSON object, that is the result of your request.

With the line $scope.phones = data;, you're simply assigning to $scope of Angular the data object, without actually parsing it. The result is that Angular is not able to understand in the ng-repeat directive what actually {{phone.name}} and {{phone.walltime}} are and the JSON string is shown.

In order to have the ng-repeat directive working as expected, you have to parse first the JSON object, process it (creating for example a custom object and assigning its properties) and then assign it to $scope object.

You could perform the parse using something like JSON.parse(data);. Please have a look at this question for further information.

Or even using the Angular's builtin function angular.fromJson(data).

An example could this:

$http.get(url).success(function(data) {
      alert(data);
      $scope.phones = angular.fromJson(data); 
  });
  };

edited May 23 '17 at 10:26

Community

1
1

answered Aug 03 '15 at 07:44

Alberto Solano

7,972
3
38
61

Alberto - Thanks. I tried that too, still the same json displayed on browser. What worries me is that the alert message inside the angular controller does not display either. – user1384205 Aug 03 '15 at 09:16
1

Thanks. This solution actually works. The problem was with my environment that didn't refresh. – user1384205 Aug 06 '15 at 06:49
@user1384205 Sorry for my late reply. I'm glad you solved the problem. I wonder how the environment didn't refresh. How was it possible? – Alberto Solano Aug 06 '15 at 07:34
1

Hi Alberto. I use docker as my development environment. The image was set to one port but I was accessing the other. The other port was showing the old content. My apologies. – user1384205 Aug 06 '15 at 10:58

score 0 · Answer 2 · answered Aug 03 '15 at 07:37

0

Test this :

var url = 'http://192.168.59.103/members';
$http.get(url).then(
    function(response) {
        console.log('success',response)
    },
    function(data) {
        // Handle error here
    })

answered Aug 03 '15 at 07:37

Kram

526
5
11

Angular js does not get json response from node js

2 Answers2