Angularjs json数据读取答案

【问题标题】：Angularjs json data readingAngularjs json数据读取
【发布时间】：2018-09-26 08:02:38
【问题描述】：

我正在尝试从 url 读取 json 数据，但它不起作用。

This is how the json url look like（如果 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>

错误日志：

Uncaught SyntaxError: Unexpected token ]

还有

未捕获的错误：[$injector:modulerr]

【问题讨论】：

控制台中是否出现错误？（按F11可以看到控制台）
您是否尝试从其他域请求 URL？
不，没什么..
啊我觉得可能是这样@huanfengspan>
如果您从其他域请求任何内容，您应该收到控制台错误，例如“访问跨域...”，并且在您的代码中 $http.get('url'), 'url'应该是一个变量而不是一个字符串。

标签： javascript angularjs json

【解决方案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;
  });

};

【讨论】：

我在下面的答案中提供了什么:)
@RameshRajendran 你写了一百万，所以我在同一时期写。很抱歉
没问题 :) :) :)

【解决方案2】：

试试这个，

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

您必须将 '/someUrl' 替换为您的 url api。

【讨论】：

我现在在控制台上得到了结果，但是显示时什么都没有
上传了@RameshRajendran，当我调用未捕获的错误时我得到的错误：[$injector:modulerr]
@StanleyAng 编辑您的问题并发布错误日志
试试这个$scope.ninjass = response.data.SrchResults;
@StanleyAng 请检查我的答案。

【解决方案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); 
  }); 
};

【讨论】：

【解决方案4】：

您应该全局定义$scope.ninjass=[];。除非由于模型对象未定义而导致 ng-repeat 抛出错误。请检查下面的sn-p；

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>

【讨论】：