Angular JS无法从节点JS获取JSON响应

Question

I am trying to establish REST connection between node (middleware) and angular (UI). 我正在尝试在节点（中间件）和角度（UI）之间建立REST连接。 However, the json is displayed on the browser rather than being routed via the angular controller/html 但是，json显示在浏览器上，而不是通过角度控制器/ html路由

Node/Express router.js 节点/ 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 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-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"}] [{“ 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. 请让我知道我在做什么错。

Answer 1

What you see on the browser's window is a JSON object, that is the result of your request. 在浏览器窗口中看到的是一个JSON对象，这是您请求的结果。

With the line $scope.phones = data; 行$scope.phones = data; , you're simply assigning to $scope of Angular the data object, without actually parsing it. ，您只是将data对象分配给Angular的$scope ，而没有实际对其进行解析。 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. 结果是Angular无法在ng-repeat指令中理解{{phone.name}}和{{phone.walltime}}实际{{phone.walltime}} ，并显示JSON字符串。

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. 为了使ng-repeat指令按预期工作，您必须首先解析JSON对象，对其进行处理（例如，创建一个自定义对象并分配其属性），然后将其分配给$scope对象。

You could perform the parse using something like JSON.parse(data); 您可以使用JSON.parse(data);类的方法执行解析JSON.parse(data); . 。 Please have a look at this question for further information. 请查看此问题以获取更多信息。

Or even using the Angular's builtin function angular.fromJson(data) . 甚至使用Angular的内置函数angular.fromJson(data) 。

An example could this: 一个例子可能是这样的：

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

Answer 2

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
    })

Angular JS无法从节点JS获取JSON响应

问题描述

2 个解决方案

解决方案1
1 已采纳 2015-08-03 07:44:42

解决方案2
0 2015-08-03 07:37:53

Angular JS无法从节点JS获取JSON响应

问题描述

2 个解决方案

解决方案1 1 已采纳 2015-08-03 07:44:42

解决方案2 0 2015-08-03 07:37:53

解决方案1
1 已采纳 2015-08-03 07:44:42

解决方案2
0 2015-08-03 07:37:53