使用 Angular DataTable 显示 JSON 数据答案

【问题标题】：Display JSON data using an Angular DataTable使用 Angular DataTable 显示 JSON 数据
【发布时间】：2018-10-27 04:05:10
【问题描述】：

我正在使用 Angular DataTable 使用 JSON 数组显示数据，但数据未显示。我认为我的 HTML 页面有问题。你能找到问题吗？

HTML 文件：

   <tbody>
  <tr ng-repeat="user in userList">
    <td><a class="green shortinfo" href="javascript:;" ng-click="childInfo(user, $event)" title="Click to view more"><i class="glyphicon glyphicon-plus-sign"></a></td>
    <td>{{user.name}}</td>
    <td>{{user.position}}</td>
    <td>{{user.office}}</td>
    <td><div class="btn-group">
            <button type="button" class="btn btn-default btn" ng-click="edit($index);"><i class="glyphicon glyphicon-pencil"></i></button>  
            <button type="button" class="btn btn-default btn" ng-click="delete();"><i class="glyphicon glyphicon-trash"></i></button> 
            </div></td>
  </tr>
</tbody>

这是 HTML 页面的一部分：

我的 JSON 数据格式：

$scope.userList = {"InvoiceHeaders":[
{
  "name": "Tiger Nixon",
  "position": "System Architect",
  "salary": "$320,800",
  "start_date": "2011/04/25",
  "office": "Edinburgh",
  "extn": "5421"
},
{
  "name": "Garrett Winters",
  "position": "Accountant",
  "salary": "$170,750",
  "start_date": "2011/07/25",
  "office": "Tokyo",
  "extn": "8422"
}

]; }

【问题讨论】：

你的问题会不会是 userList 实际上不是一个列表或用户，而是一个 JS 对象，它有一个名为 InvoiceHeaders 的属性，其值为用户列表？
我正在尝试在我的项目中使用数据表示例。
尝试设置 $scope.userList = [ { "name" : "Tiger", ... }, { "name" : "Garret", .. } ]; ...
复制并粘贴您的 JSON 代码到 jsonlint.com，您应该删除尾随 ; ]之后

标签： javascript angularjs json datatables angular-datatables

【解决方案1】：

您的 JSON 无效，请将其更改为，

{
  "InvoiceHeaders": [
    {
      "name": "Tiger Nixon",
      "position": "System Architect",
      "salary": "$320,800",
      "start_date": "2011/04/25",
      "office": "Edinburgh",
      "extn": "5421"
    },
    {
      "name": "Garrett Winters",
      "position": "Accountant",
      "salary": "$170,750",
      "start_date": "2011/07/25",
      "office": "Tokyo",
      "extn": "8422"
    }
  ]
}

演示

var myApp = angular.module('testApp',[]);
myApp.controller('myCtrl',function($scope){
$scope.userList = {
  "InvoiceHeaders": [
    {
      "name": "Tiger Nixon",
      "position": "System Architect",
      "salary": "$320,800",
      "start_date": "2011/04/25",
      "office": "Edinburgh",
      "extn": "5421"
    },
    {
      "name": "Garrett Winters",
      "position": "Accountant",
      "salary": "$170,750",
      "start_date": "2011/07/25",
      "office": "Tokyo",
      "extn": "8422"
    }
  ]
}

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="testApp" ng-controller="myCtrl">
<ul ng-repeat="user in userList.InvoiceHeaders">
   <li>{{user.name}}</li>
  <li>{{user.position}}</li>
  <li>{{user.office}}</li>
  <td>
 </ul>
</body>

【讨论】：