Cant отображения данных от сервера

enter image description here Cant отображения данных от сервера

<!DOCTYPE html> 
 
<html ng-app="myApp"> 
 

 
<head> 
 
    <title>ContactApp</title> 
 

 
    <!-- Latest compiled and minified CSS --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 
 
     integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" 
 
     crossorigin="anonymous"> 
 

 
    <!-- Optional theme --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" 
 
     integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" 
 
     crossorigin="anonymous"> 
 
</head> 
 

 
<body> 
 
    <div class="container" ng-controller="AppCtrl"> 
 

 
     <h1>Contact app</h1> 
 

 
     <table class="table"> 
 
      <thead> 
 
       <tr> 
 
        <th>Name</th> 
 
        <th>E-mail</th> 
 
        <th>Number</th> 
 
       </tr> 
 
      </thead> 
 
      <tbody> 
 
       <tr ng-repeat="contact in contactlist"> 
 
        <td>{{contact.name}}</td> 
 
        <td>{{contact.email}}</td> 
 
        <td>{{contact.number}}</td> 
 
       </tr> 
 
      </tbody> 
 
     </table> 
 

 
    </div> 
 

 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> 
 
    <script src="controllers/controller.js"></script> 
 
</body> 
 

 
</html>

Не так давно я начал изучать MEAN стек и застрял в этой проблеме. Как вы можете видеть на контроллере изображения, получать данные с сервера, но не отображать его. Что мне делать, чтобы исправить это? Спасибо за любую помощь. Извините за плохой английский = D

код контроллера:

var myApp = angular.module('myApp',[]); 
    myApp.controller('AppCtrl',['$scope','$http',function($scope,$http){ 
     console.log("hi"); 

$http.get('/contactlist').then(function(response){ 
    console.log ('RECIVED'); 
    $scope.contactlist = response; 
}); 
}]);[enter image description here][1]

код сервера:

var express = require("express"); 
var app =express(); 

app.use (express.static(__dirname + "/public")); 

app.get ('/contactlist',function(req,res){ 
    console.log ('waitnig for my lovely request'); 

    person1 = { 
     name: 'HBN1', 
     email: '[email protected]', 
     number: '(111) 111-1111' 
    } 
    person2 = { 
     name: "HBN2", 
     email: "[email protected]", 
     number: "(222) 222-2222" 
    } 
    person3 = { 
     name: "HBN3", 
     email: "[email protected]", 
     number: "(333) 333-3333" 
    } 

    var contactlist = [person1,person2,person3]; 
    res.json(contactlist); 
}) 
app.listen(3000); 
console.log ('server runing on port 3000');

источник

2017-01-27 Gleb Z.

вы видите данные получать извлекаться в консоли? – Sajeetharan

Да, я могу видеть его в ответ –

Убедитесь, что ваш api для отдыха возвращает массив json.

DEMO

var app = angular.module('todoApp', []); 
 

 
app.controller("AppCtrl", ["$scope", 
 
    function($scope) { 
 
    $scope.contactlist = [{ 
 
     name: 'HBN1', 
 
     email: '[email protected]', 
 
     number: '(111) 111-1111' 
 
    }, 
 
    { 
 
     name: "HBN2", 
 
     email: "[email protected]", 
 
     number: "(222) 222-2222" 
 
    } 
 
    , { 
 
     name: "HBN3", 
 
     email: "[email protected]", 
 
     number: "(333) 333-3333" 
 
    }]; 
 
    
 
    
 
    } 
 
]);

<!DOCTYPE html> 
 
<html ng-app="todoApp"> 
 

 
<head> 
 
    <title>Sample</title> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> 
 
</head> 
 
<body ng-controller="AppCtrl"> 
 
<div class="container"> 
 

 
\t \t <h1>Contact app</h1> 
 

 
\t \t <table class="table"> 
 
\t \t \t <thead> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <th>Name</th> 
 
\t \t \t \t \t <th>E-mail</th> 
 
\t \t \t \t \t <th>Number</th> 
 
\t \t \t \t </tr> 
 
\t \t \t </thead> 
 
\t \t \t <tbody> 
 
\t \t \t \t <tr ng-repeat="contact in contactlist"> 
 
\t \t \t \t \t <td>{{contact.name}}</td> 
 
\t \t \t \t \t <td>{{contact.email}}</td> 
 
\t \t \t \t \t <td>{{contact.number}}</td> 
 
\t \t \t \t </tr> 
 
\t \t \t </tbody> 
 
\t \t </table> 
 

 
\t </div> 
 
    
 
</body> 
 

 
</html>

источник

2017-01-27 16:29:22 Sajeetharan

Вы имеете в виду данные в контроллере? Да, так оно и работает. –

У вас есть зритель команды? – Sajeetharan

1 сек, плохо установите его –

Я не могу комментировать, потому что моя репутация слишком низкая, но то, что вы видите, если вы console.log (ответ) в вашем контроллере?

Если данные поступают без изменений, то ваша страница, вероятно, будет загружаться до того, как данные поступят, следовательно, будет отображаться как пустой. Если это так, то будут работать следующие.

<div class="container" ng-controller="AppCtrl" ng-show='isLoaded'> // add this ng-show 

    <h1>Contact app</h1> 

    <table class="table"> 
     <thead> 
      <tr> 
       <th>Name</th> 
       <th>E-mail</th> 
       <th>Number</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr ng-repeat="contact in contactlist"> 
       <td>{{contact.name}}</td> 
       <td>{{contact.email}}</td> 
       <td>{{contact.number}}</td> 
      </tr> 
     </tbody> 
    </table> 

</div>

Контроллер:

var myApp = angular.module('myApp',[]); 
myApp.controller('AppCtrl',['$scope','$http',function($scope,$http){ 
    console.log("hi"); 

$scope.isLoaded = false // add this 

$http.get('/contactlist').then(function(response){ 
    console.log ('RECIVED'); 
    $scope.contactlist = response.data; //make response.data as Daniel said above 

    $scope.isLoaded = true; // add this 
}); 
}]);[enter image description here][1]

источник

2017-01-27 16:07:05 reedb89

Еще не работает. В консольном журнале все нормально. вы видели изображение, которое я прикрепляю в верхней части сообщения? –

Нет, я не сделал! Возможно, попробуйте res.send (контакты) вместо res.json (контакты), поскольку вы отправляете массив объектов, а не только json. – reedb89

Спасибо за помощь, но все равно не работает. –

Изменение:

$http.get('/contactlist').then(function(response){ 
    console.log ('RECIVED'); 
    $scope.contactlist = response; 
});

To:

$http.get('/contactlist').then(function(response){ 
    console.log ('RECIVED'); 
    $scope.contactlist = response.data; // note the .data part 
});

The response свойств объекта можно найти по адресу: https://docs.angularjs.org/api/ng/service/ $ HTTP

источник

2017-01-27 16:27:55 Daniel

Cant отображения данных от сервера

ответ

Смежные вопросы