AngularJS$HTTP.json

Question

我正在尝试从 API 中提取当前流的列表并使用 AngularJS 迭代该信息。当我直接在 js 文件中输入 JSON 数据时，Angular 工作正常。但是，当使用如下所示的 http 请求时，我得到一个空白页面。我进行了高低搜索，但无法将其应用于我的具体问题。任何帮助表示赞赏。谢谢！

HTTP 文件：

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
   <div ng-app="myApp" ng-controller="namesCtrl">
      <ul>
         <li ng-repeat="x in names">
            {{ x.game }}
         </li>
      </ul>
   </div>
<script src="repeat.js"></script>
</body>
</html>

Repeat.js

var app = angular.module('myApp', []);
app.controller('namesCtrl', function($scope, $http) {

$http.jsonp("https://api.twitch.tv/kraken/streams?json_callback=JSON_CALLBACK")
.success(function(response) {$scope.names = response.streams;});

});

Answer 1

https://api.twitch.tv/kraken/streams?json_callback=JSON_CALLBACK 不是 JSONP（它是普通的 JSON）。

您需要一个能够做出 JSONP 响应的服务器才能使用 $http.jsonp()。

Answer 2

嗯，使用 $http.get('url') 确实有效。我错误地认为 'data' 对象是一个数组并将“[0]”传递给它是不正确的。下面是代码，它可以提取信息并按照标记中的指示重复数据。感谢您的帮助！

HTML:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

</head>
<body>

<div ng-app="myApp" ng-controller="namesCtrl">

<ul>
  <li ng-repeat="x in data.streams">
    {{ x.game }}
  </li>
</ul>

</div>

<script src="repeat.js"></script>

</body>
</html>

JS:

var app = angular.module('myApp', []);
app.controller('namesCtrl', function($scope, $http) {

$http.get('https://api.twitch.tv/kraken/streams?').success(
    function(data, status){
        $scope.data = data;
    });
});

AngularJS$HTTP.json

AngularJS $HTTP.json

javascript

json

angularjs

twitch