使用 angularjs 从本地 json 打印数据答案

【问题标题】：Print data from local json with angularjs使用 angularjs 从本地 json 打印数据
【发布时间】：2017-12-27 07:42:01
【问题描述】：

我是 angularjs 的新手，我想将本地 json 中的数据发布到表格中。我尝试了这种方法，但是当我打开控制台浏览器时出现错误：无法读取未定义的属性 'id'

<html ng-app="GithubApp">

<head>
<meta charset="utf-8">
<title></title>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
<script>
var countryApp = angular.module('GithubApp', []);
countryApp.controller('GitCtrl', function ($scope, $http) {
  $http.get('JSONdate.json').success(function (data) {
    $scope.gits = data;
  });
});

<body ng-controller="GitCtrl">
  <table>
   <tr>
  <th>Id</th>
  <th>Login Name</th>
  <th>Email</th>
  <th>Public Gits</th>
  <th>Html Profile</th>
  <th>Avatar URL</th>
</tr>
<tr ng-repeat="git in gits">
  <td>{{git.id}}</td>
  <td>{{git.login_name}}</td>
  <td>{{git.email}}</td>
  <td>{{git.public_gits}}</td>
  <td>{{git.Html_profile}}</td>
  <td>{{git.Avatar_URL}}</td>
  </tr>
</table>
</body>

</html>

这是我的 json 的一部分，以及我的数据的结构。

[
   {
      "id":"0",
      "login_name":"jk3064",
      "public_gits":"0",
      "Html_profile":"LINK",
      "Avatar_URL":"LINK"
   },
   {
      "id":"1",
      "login_name":"hoijui",
      "public_gits":"5",
      "Html_profile":"LINK",
      "Avatar_URL":"LINK"
   },
   {
      "id":"2",
      "login_name":"abma",
      "public_gits":"11",
      "Html_profile":"LINK",
      "Avatar_URL":"LINK"
   },
   {
      "id":"3",
      "login_name":"tvo",
      "email":"tobivollebregt@gmail.com",
      "public_gits":"1",
      "Html_profile":"LINK",
      "Avatar_URL":"LINK"
   },
   {
      "id":"4",
      "login_name":"zerver",
      "public_gits":"0",
      "Html_profile":"LINK",
      "Avatar_URL":"LINK"
   }
]

如果您能说出错误是什么，以及我应该在项目中修改什么以使其正常工作。请帮忙

【问题讨论】：

标签： javascript html angularjs json

【解决方案1】：

您应该使用 .then 并访问您得到的响应的数据，

$http.get('JSONdate.json').then(function (response) {
    $scope.gits = response.data;
});

DEMO

【讨论】：

已弃用的success 回调不返回响应对象。始终使用.then。

【解决方案2】：

它运行良好。我什么都没改变。见here

var countryApp = angular.module('GithubApp', []);
countryApp.controller('GitCtrl', function ($scope, $http) {
  $http.get('JSONdate.json').success(function (data) {
    $scope.gits = data;
  });
});

【讨论】：