个人中心
gpt4 book ai didi

javascript - 无法显示来自服务器的数据

转载 作者：太空宇宙 更新时间：2023-11-04 02:11:27 25 4
gpt4 key购买 nike

enter image description here

<!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 堆栈并陷入这个问题。正如您在图片 Controller 上看到的那样，从服务器接收数据但不显示它。我应该做什么来修复它？谢谢你的帮助。抱歉英语不好=D

Controller 代码:

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');

最佳答案

确保您的 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>

关于javascript - 无法显示来自服务器的数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41897912/

25 4 0
文章推荐： node.js - 这个 Nodejs 包放在哪里
文章推荐： C编程: allocating memory for char array using malloc in C89
文章推荐： c - 像 qsort 这样的 C 函数如何处理不同的数据类型？
文章推荐： node.js - 从 pug 模板启动 nodejs 函数
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com