javascript – JSON数据未显示

2019年7月28日 131次阅读

我是Angular JS的新手,我正在尝试使用
JSON数据调用Rest API.但是当我运行我的HTTP服务器时,什么都没有显示出来.当我在控制台中删除响应时,我收到响应.

Htmlcode：

<html ng-app="myapp">
<head>
<div ng-controller="header">
    <h1><center>{{apptitle}}</center></h1>
    </div>
<div ng-controller="contactinfo">
    <table class="table">
        <thead>
            <tr>
                <th>Sl.No</th>
                <th>Name</th>
                <th>Address</th>
                <th>Phno</th>
            </tr>
        </thead>
        <tbody ng-repeat="info in contact">
            <tr>
                <th scope="row">1</th>
                <td>{{ info.name }}</td>
                <td>{{ info.location }}</td>
                <td>{{ info.phone }}</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>{{ info.name }}</td>
                <td>{{ info.location }}</td>
                <td>{{ info.phone }}</td>
            </tr>
            </tr>
        </tbody>
    </table>
</div>

角度代码：

var app = angular.module('myapp',[]);
    app.controller('header',function($scope){
        $scope.apptitle = "Basic contacts App"
        }); 
    app.controller('contactinfo',function($scope,$http){
        $http.get('http://localhost:3000/contactinfo')
            .then(function(response){
                console.log(response);
            $scope.contact = response.data.contactinfo;
        });
    });

期待响应数据：

{
"contactinfo" : [
    {
        "name" : "Jeremy Franke",
        "location":"madrid , Unitedkingdom",
        "phone" : 9874563210
    },
    {
        "name" : "Jade Raymond",
        "location":"portland , Netherland",
        "phone" : 9874563210
    },
    {
        "name" : "Franklin",
        "location":"texas , UnitedStates",
        "phone" : 9874563210
    }
]

}

最佳答案 请仔细比较您的解决方案与此
demo fiddle.你的方法很好,所以应该有另一个问题.也许您可以在将解决方案与此可运行代码进行比较时重现您的问题.

视图

<!DOCTYPE html>
<html ng-app="myapp">
<head>
    <title>Demo</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://code.angularjs.org/1.4.7/angular.js" type="text/javascript"></script>
    <script src="script.js"></script>
</head>
<body>
        <div ng-controller="header">
            <h1><center>{{apptitle}}</center></h1>
        </div>

        <div ng-controller="contactinfo">-

            <table class="table">
                <thead>
                    <tr>
                        <th>Sl.No</th>
                        <th>Name</th>
                        <th>Address</th>
                        <th>Phno</th>
                    </tr>
                </thead>
                <tbody ng-repeat="info in contact">
                    <tr ng-repeat="info in contact">
                        <th scope="row">3</th>
                        <td>{{ info.name }}</td>
                        <td>{{ info.location }}</td>
                        <td>{{ info.phone }}</td>   
                    </tr>
                </tbody>
            </table>
        </div>
</body>
</html>

AngularJS应用程序

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

    app.controller('header', function($scope) {
      $scope.apptitle = "Basic contacts App"
    });


    app.controller('contactinfo', function($scope, $http) {
      $http.get('./data.json')
        .then(function(response) {
          console.log(response);
          $scope.contact = response.data.contactinfo;
        });
    });
点赞