使用Angular從JSON加載數據

Question

我有這樣的代碼：

JBenchApp.controller('CaseListCtrl', ['$scope',
  function ($scope) {
      // Case list stuff here
      $scope.cases = [
          {
              'number': '30-2013-0069378-PR-PL-CJC',
              'title': 'Baumgartner - Probate',
              'sequence': '',
              'time': '9:00 am',
              'event': 'Petition for Final Distribution',
              'event2': ''
          },
          {
              'number': '30-2013-00649408-PR-PL-CJC',
              'title': 'Dupaquier - Probate',
              'sequence': '',
              'time': '9:00 am',
              'event': 'Petition - Other',
              'event2': ''
          },
          {
              'number': '30-2011-00510275-PR-PL-CJC',
              'title': 'Baker - Conservatorship',
              'sequence': '',
              'time': '9:00 am',
              'event': 'Accounting',
              'event2': 'Review Hearing'
          },
          {
              'number': '30-2010-00334622-PR-PL-CJC',
              'title': 'Montero - Minors Compromise',
              'sequence': '',
              'time': '9:00 am',
              'event': 'Review Hearing',
              'event2': ''
          },
          {
              'number': '30-2011-005260282-PR-PL-CJC',
              'title': 'Reed - Conservatorship',
              'time': '9:00 am',
              'event': 'Petition - Other',
              'event2': ''
          }
      ];

      $scope.departments = [
          {
              'dept': '1'
          },
          {
              'dept': '1A'
          },
          {
              'dept': '2'
          },
          {
              'dept': '2A',
          },
          {
              'dept': '2B'
          },
          {
              'dept': '2C'
          },
          {
              'dept': '2D'
          },
          {
              'dept': '3'
          },
          {
              'dept': '4'
          },
          {
              'dept': '5'
          },
          {
              'dept': '6'
          },
          {
              'dept': '7'
          },
          {
              'dept': '8'
          },
          {
              'dept': '9'
          },
          {
              'dept': '11'
          },
          {
              'dept': '12'
          },
          {
              'dept': '13'
          },
          {
              'dept': '14'
          },
          {
              'dept': '15'
          },
          {
              'dept': '16'
          },
          {
              'dept': '17'
          },
          {
              'dept': '18'
          },
          {
              'dept': '19'
          },
          {
              'dept': '20'
          },
          {
              'dept': '21'
          },
          {
              'dept': '22'
          },
          {
              'dept': '23'
          }
      ];


  }]);

我想將數據移動到外部文件。 我現在有一個cases.js文件（.json在我的本地計算機上不起作用），其數據如下：

[
          {
              'number': '30-2013-0069378-PR-PL-CJC',
              'title': 'Baumgartner - Probate',
              'sequence': '',
              'time': '9:00 am',
              'event': 'Petition for Final Distribution',
              'event2': ''
          },
          {
              'number': '30-2013-00649408-PR-PL-CJC',
              'title': 'Dupaquier - Probate',
              'sequence': '',
              'time': '9:00 am',
              'event': 'Petition - Other',
              'event2': ''
          },
          {
              'number': '30-2011-00510275-PR-PL-CJC',
              'title': 'Baker - Conservatorship',
              'sequence': '',
              'time': '9:00 am',
              'event': 'Accounting',
              'event2': 'Review Hearing'
          },
          {
              'number': '30-2010-00334622-PR-PL-CJC',
              'title': 'Montero - Minors Compromise',
              'sequence': '',
              'time': '9:00 am',
              'event': 'Review Hearing',
              'event2': ''
          },
          {
              'number': '30-2011-005260282-PR-PL-CJC',
              'title': 'Reed - Conservatorship',
              'time': '9:00 am',
              'event': 'Petition - Other',
              'event2': ''
          }
];

我將代碼更改如下：

JBenchApp.controller('CaseListCtrl', ['$scope', '$http', 
  function ($scope, $http) {
      // Case list stuff here
      $http.get('json/cases.js').success(function (response) {
          $scope.cases = response;
      });

      $scope.departments = [
          {
              'dept': '1'
          },
          {
              'dept': '1A'
          },
          {
              'dept': '2'
          },
          {
              'dept': '2A',
          },
          {
              'dept': '2B'
          },
          {
              'dept': '2C'
          },
          {
              'dept': '2D'
          },
          {
              'dept': '3'
          },
          {
              'dept': '4'
          },
          {
              'dept': '5'
          },
          {
              'dept': '6'
          },
          {
              'dept': '7'
          },
          {
              'dept': '8'
          },
          {
              'dept': '9'
          },
          {
              'dept': '11'
          },
          {
              'dept': '12'
          },
          {
              'dept': '13'
          },
          {
              'dept': '14'
          },
          {
              'dept': '15'
          },
          {
              'dept': '16'
          },
          {
              'dept': '17'
          },
          {
              'dept': '18'
          },
          {
              'dept': '19'
          },
          {
              'dept': '20'
          },
          {
              'dept': '21'
          },
          {
              'dept': '22'
          },
          {
              'dept': '23'
          }
      ];


  }]);

我的部分看起來像這樣：

<div class="row" ng-show="$parent.loggedin">
    <div class="col-sm-12 calselectrow">
        <span class="glyphicon glyphicon-calendar calicon"></span>
        <input type="text" id="calpick" ng-model="date"  jdatepicker />
        <a href="#" class="btn btn-primary flat-edge">>></a>
        <span class="bluedept">Department:</span>
        <select class="selectpicker deptpicker" selectpicker ng-controller="CaseListCtrl">
            <option ng-repeat="department in departments">{{department.dept}}</option>
        </select>
    </div>
</div>
<div class="row" ng-show="$parent.loggedin">
    <div ng-controller="CaseListCtrl">
        <div class="col-sm-8 col-sm-offset-2 caselist" ng-repeat-start="case in cases track by $index">
            <div class="sequence">
                <input type=text class="seq-box" size="1" value="{{case.sequence}}" />
            </div>
            <div class="casetitle">
                <a href="/case/{{case.number}}" class="caselink">{{case.number}}</a>
                <a href="/case/{{case.number}}" class="btn btn-xs btn-danger calicon-view">
                    <span class="glyphicon glyphicon-calendar"></span>
                </a>
                <a href="/case/{{case.number}}" class="btn btn-xs btn-danger calicon-view">
                    <span class="glyphicon glyphicon-user"></span>
                </a>
                {{case.title}}
            </div>
        </div>
        <div class="col-sm-8 col-sm-offset-2 caselist-bottom">
            <div class="col-sm-9 col-sm-offset-1">
                <div class="hearing-time">{{case.time}}</div>
                <div class="hearing-title">{{case.event}}</div>
            </div> 
        </div>
        <div ng-repeat-end></div>
    </div>
</div>

當我運行它時，我得到了一堆根本沒有數據的行。 如果我刪除“ $ index跟蹤”，則會收到有關重復鍵的錯誤。 如何使這項工作能夠顯示我的數據？

Answer 1

此代碼不會被解釋為JavaScript，因為這是一個安全問題。 您將需要使用jsonp或在響應正文中將此數據作為json返回。

嘗試這個：

$http({method: 'JSONP', url:<your url> + ?callback=JSON_CALLBACK})

並更改您的回復以返回：

JSON_CALLBACK ([your array]);

Answer 2

答案是JSON無效。 我本應該使用雙引號時使用單引號。 我還用分號結束了文件，必須將其省略。 當我這樣做時，它會完美運行。