使用angularjs

时间:2017-07-21 09:51:12

标签: javascript html angularjs json

我是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"
   }
]

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

2 个答案:

答案 0 :(得分:0)

你应该使用.then并访问你得到的回复数据,

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

<强> DEMO

答案 1 :(得分:0)

它完美运作。我一无所获。 见here

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