AngularJS JSON數據讀取

Question

我正在嘗試從URL中讀取json數據，但是它不起作用。

這就是json網址的樣子 （如果chrome不起作用，請在firefox中打開它）。

這是我的JavaScript代碼：

$scope.displayA = function() {
  $http.get('url').then(function(response){
    $scope.ninjass = response.data;
  });
};

我正在嘗試以ng-repeat格式顯示它，但是什么也沒顯示。

ng-repeat代碼

    <table>
      <!--  <th ng-repeat="ninja in ninjass">
             {{ ninja.id }}
        </th> -->
        <tbody>
            <tr ng-repeat="ninja in ninjass">
                <td>{{ ninja.name }}</td>
                <td>{{ ninja.description }}</td>
              <!--  <td>
                  {{ ninja.NAME }}
                </td>
                <td>{{ ninja.NAME }}</td> -->
            </tr>
        </tbody>
    </table>

錯誤日志：

未捕獲到的SyntaxError：意外令牌]

和

未捕獲的錯誤：[$ injector：modulerr]

Answer 1

我在您的代碼中檢測到很少的錯誤。 首先，它應該是不帶''的url； 並且必須在上面聲明。 第二件事$ scope.ninjass應該在代碼之上。 被計為全局變量。 第三件事，您需要訪問get調用內的“ SrchResults”屬性。

$scope.ninjass = response.data.SrchResults; 

總的來說，應該是這樣的。

var url = //put your url here;
$scope.ninjass = [];
$scope.displayA = function() {
  $http.get(url).then(function(response){
    $scope.ninjass = response.data.SrchResults;
  });

};

Answer 2

試試這個

$http({
  method: 'GET',
  url: '/someUrl'
}).then(function successCallback(response) {
  console.log(response.data);
}, function errorCallback(response) {
  console.log(response);
});

您必須用網址api替換“ / someUrl”。

Answer 3

嘗試這個

$scope.displayA = function() {  
   $http.get('url').then(function(response){    
         console.log("success :- "+JSON.stringify(response.data));
         $scope.ninjass = response.data.SrchResults;
         console.log("total length :- "+$scope.ninjass.length); 
  }); 
};

Answer 4

您應該定義$scope.ninjass=[]; 全球。 除非由於模型對象未定義而導致ng-repeat throw錯誤。 請檢查以下代碼段；

 angular.module("test",[]).controller("testc",function($scope,$http) { $scope.ninjass=[]; $http.get('https://developers.onemap.sg/publicapi/themeapi/retrieveTheme?queryName=historicsites&token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjMsInVzZXJfaWQiOjMsImVtYWlsIjoicHVibGljQXBpUm9sZUBzbGEuZ292LnNnIiwiZm9yZXZlciI6ZmFsc2UsImlzcyI6Imh0dHA6XC9cL29tMi5kZmUub25lbWFwLnNnXC9hcGlcL3YyXC91c2VyXC9zZXNzaW9uIiwiaWF0IjoxNTM3ODYwNTIxLCJleHAiOjE1MzgyOTI1MjEsIm5iZiI6MTUzNzg2MDUyMSwianRpIjoiNmVhNzA3NTk5OWM1NGZlZjQ0ZDFkMzEyZTkyMmEzMmUifQ.q_MiRnCT_2owbMFfCcpVVSECOTellwvojAY5Wwz0xJY').then(function(response){ $scope.ninjass = response.data.SrchResults; }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="test" ng-controller="testc"> <table> <tbody> <tr ng-repeat="ninja in ninjass"> <td><b>{{ ninja.NAME}}<b/></td> <td>{{ ninja.DESCRIPTION}}</td> </tr> </tbody> </table> </div>