2015-08-03 3 views
0

Я пытаюсь установить соединение REST между узлом (промежуточное ПО) и угловым (UI). Тем не менее, JSON отображается в браузере, а не направляется через угловой контроллер/htmlУгловой js не получает json-ответ от узла js

Узел/Экспресс 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); 

Угловые 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> 

В браузере находится

[{ "Имя": "app1", "walltime": "1050"}, { "имя": "app2", "walltime": "30"}]

я, кажется, не хватает некоторая конфигурация, позволяющая узлу и угловой связи. Пожалуйста, дайте мне знать, что я делаю неправильно.

+0

@Alberto - Спасибо. Я тоже это пробовал, все равно тот же самый json отображается в браузере. Меня беспокоит, что предупреждающее сообщение внутри углового контроллера также не отображается. – user1384205

+0

@Kram. Благодарю. Я добавил консольный журнал как в случае сбоя, так и в случае сбоя, как показано ниже. Но на консоли ничего не печатается. $ http.get (URL) .then ( функция (ответ) { console.log ('успех', ответ); }, функция (данные) { console.log ('Эрро', ответ); }) – user1384205

ответ

1

То, что вы видите в окне браузера является объектом JSON, который является результатом вашего запроса.

С линией $scope.phones = data; вы просто присваиваете $scope Углового объекта data, фактически не разбирая его. Результатом является то, что Angular не может понять в директиве ng-repeat, что на самом деле {{phone.name}} и {{phone.walltime}}, и строка JSON показана.

Для того чтобы директива ng-repeat работала должным образом, вы должны сначала проанализировать объект JSON, обработать его (создать, например, пользовательский объект и присвоить его свойства), а затем присвоить его объекту $scope.

Вы можете выполнить синтаксис, используя что-то вроде JSON.parse(data);. Дополнительную информацию можно найти на странице this question.

Или даже используя встроенную функцию Angular angular.fromJson(data).

Примером может это:

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

Alberto - Спасибо. Я тоже это пробовал, все равно тот же самый json отображается в браузере. Меня беспокоит, что предупреждающее сообщение внутри углового контроллера также не отображается. – user1384205

+1

Спасибо. Это решение действительно работает. Проблема была в моей среде, которая не обновлялась. – user1384205

+0

@ user1384205 Извините за мой поздний ответ.Я рад, что вы решили проблему. Интересно, как среда не обновилась. Как это было возможно? –

0

Испытание это:

var url = 'http://192.168.59.103/members'; 
$http.get(url).then(
    function(response) { 
     console.log('success',response) 
    }, 
    function(data) { 
     // Handle error here 
    }) 
Смежные вопросы