无法显示来自服务器的数据答案

【问题标题】：Cant display data from server无法显示来自服务器的数据
【发布时间】：2017-06-13 08:49:19
【问题描述】：

<!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: 'HB1@robo.com',
        number: '(111) 111-1111'
    }
    person2 = {
        name: "HBN2",
        email: "HB2@robo.com",
        number: "(222) 222-2222"
    }
    person3 = {
        name: "HBN3",
        email: "HB3@robo.com",
        number: "(333) 333-3333"
    }

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

【问题讨论】：

您是否看到在控制台中检索到数据？
是的，我可以在获取响应中看到它

标签： javascript angularjs node.js express mean-stack

【解决方案1】：

确保你的 rest api 返回一个 json 数组。

演示

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

app.controller("AppCtrl", ["$scope",
  function($scope) {
    $scope.contactlist  =   [{
        name: 'HBN1',
        email: 'HB1@robo.com',
        number: '(111) 111-1111'
    },
    {
        name: "HBN2",
        email: "HB2@robo.com",
        number: "(222) 222-2222"
    }
    , {
        name: "HBN3",
        email: "HB3@robo.com",
        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">

		<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>
 
</body>

</html>

【讨论】：

你的意思是把数据放到控制器里？是的，这样可以正常工作。
你有团队查看器吗？
一秒，安装失败
就是这样。现在怎么办？抱歉等待
id:304 758 365 pass:1sjq63

【解决方案2】：

变化：

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

收件人：

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

response 对象属性位于：https://docs.angularjs.org/api/ng/service/$http

【讨论】：

【解决方案3】：

我无法发表评论，因为我的声誉太低了，但是如果您在控制器中使用 console.log(response)，您会看到什么？

如果数据完好无损，则您的页面可能在数据到达之前加载，因此显示为空。如果是这种情况，以下将起作用。

<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]

【讨论】：

还是不行。在控制台日志中一切正常。你看到我贴在帖子顶部的图片了吗？
不，我没有！也许尝试 res.send(contacts) 而不是 res.json(contacts) 因为您正在发送对象数组而不仅仅是 json。