JSON数据未在Angular JS中加载

时间:2015-06-26 13:25:08

标签: javascript json angularjs

我是AngularJS& JSON并尝试下面的示例,但我无法从JSON文件加载数据:

<body>
    <h2>AngularJS Sample Application</h2>
    <div ng-app="" ng-controller="kittyController">
        <table>
            <tr>
                <th>Name</th>
                <th>Roll No</th>
                <th>Percentage</th>
            </tr>
            <tr ng-repeat="kitty in kitties">
                <td>{{ kitty.Name}}</td>
                <td>{{ kitty.RollNo}}</td>
                <td>{{ kitty.Percentage.num}} -- {{kitty.Percentage.avrg}}</td>
            </tr>
        </table>
    </div>
    <script>
        function kittyController($scope, $http) {
            var url = "data.json";
            $http.get(url).success(function(response) {
                $scope.kitties = response;
            });
        }
    </script>

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js">    </script>
  </body>

data.json

[
{
"Name" : "kitty 1",
"RollNo": 101,
"Percentage" : [
{"num" : 88,
  "avrg": 4  }
 ]
 },
 {
 "Name" : "Kitty 2",
 "RollNo": 102,
 "Percentage" : [
  {"num" : 68,
  "avrg": 4  }
 ]
 }
 ]

我可以看到Name和Roll no但不是percent.num和percentage.avrg。我遗失的任何事情都是什么?

2 个答案:

答案 0 :(得分:2)

百分比被建模为数组。要么使用Object,要么必须通过

等其他方式访问它
 percantage[0].num 

但我认为我会像json那样构建json:

{
"Name" : "kitty 1",
"RollNo": 101,
"Percentage" : 
{"num" : 88,
  "avrg": 4  }
 },
 {
 "Name" : "Kitty 2",
 "RollNo": 102,
 "Percentage" :
  {"num" : 68,
  "avrg": 4  }
 }
 ]

没有经过测试,但在我看来,数组AND对象的组合总会产生问题......

答案 1 :(得分:1)

这是一个工作的plunker

http://plnkr.co/edit/Eygjk9AkGrSm7KyGrnKR?p=preview

你有两个选项使用百分比[0],如{{ kitty.Percentage[0].num}}

或将你的Json改为&#34;百分比&#34; :{&#34; num&#34; :88,&#34; avrg&#34;:4}