Question

我已经停留了一段时间，试图在 AngularJS 1.6.9 的表格中显示JSON数据。

这是我的index.html：

<!DOCTYPE html>

<head>
    <title>Een eenvoudige service</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script src="service.js"></script>
    <link rel="stylesheet" href="style.css">
    <script>
    </script>
</head>
<div ng-app="mijnApp" ng-controller="mijnController">
    <table>
        <tr>
            <th>ID</th>
            <th>City</th>
            <th>Country</th>
        </tr>
        <tr ng-repeat="x in personen">
            <td>{{x.Name}}</td>
            <td>{{x.City}}</td>
            <td>{{x.Country}}</td>
        </tr>
    </table>
</div>
</body>

</html>

这是我的JavaScript：

var App = angular.module('mijnApp', []);
App.controller('mijnController', function($scope, $http) {
    $http.get("personen.json").then(function(response) {
        $scope.personen = response.data;
    });
});

我的json文件的小例子：

{
    "records": [{
        "Name": "Alfreds Futterkiste",
        "City": "Berlin",
        "Country": "Germany"
    }, {
        "Name": "Ana Trujillo Emparedados y helados",
        "City": "México D.F.",
        "Country": "Mexico"
    }]
}

我尝试了多种方法，结果总是一样的 - 空表。

我该如何解决这个问题？请帮我解决同样的问题。

Answer 1

试试这个：

<tr ng-repeat="x in personen.records">
            <td>{{x.Name}}</td>
                <td>{{x.City}}</td>
                    <td>{{x.Country}}</td>
        </tr>

Answer 2

你错过了回复的记录。使用x in personen.records或在http响应中设置de personen，如$scope.personen = response.data.records;

我个人更喜欢第二种选择。

Answer 3

这将有助于

$.ajax({ 
    url : "personen.json", 
    dataType : 'JSON', 
    success : function(data) { 
        $scope.personen = data;
    }, 
    error : function(error) { 
        console.log( "error occurred." );     
    }
});

HTML 使用它来查看记录。

<table>
    <tr ng-repeat="record in personen.records">
       <td> {{record.Name}} </td>
       <td> {{record.City}} </td>
       <td> {{record.Country}} </td>
    </tr>
</table>

AngularJS不显示json数据

3 个答案: