javascript - 使用 ng-repeat 和 angularjs 迭代大型 API 中的项目，我的 API 正在工作，但无法获取结果？

Question

我正在使用炉石卡从公共(public) API 中获取相当大的数据，我面临的问题是ng-repeat 似乎没有响应，它给了我:

<!-- ngRepeat: item in data -->

在HTML代码中，ul标签内的HTML代码根本不显示。

Index.html:(HTML 文档的相应部分。)

<ul>
    <li ng-repeat="item in data">
        <div class="col-xs-12 col-md-16">
            <div class="prod-info-main prod-wrap clearfix">
                <div class="row">
                    <div class="col-md-7 col-sm-12 col-xs-12">
                        <div class="product-deatil">
                            <p class="price-container">
                                <span>{{item.Basic.cardId}}</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </li>
</ul>

Controller :

var produkterControllers = angular.module('produkterControllers', []);

// Skapar kontrollen produktController som hämtar data från js/data.json
produkterControllers.controller('minApiFunktionController', function myController($scope, $http) {
    fetch("https://omgvamp-hearthstone-v1.p.rapidapi.com/cards", {
            "method": "GET",
            "headers": {
                "x-rapidapi-host": "omgvamp-hearthstone-v1.p.rapidapi.com",
                "x-rapidapi-key": "8ad5a16c67mshed80ba15c31ab54p141ec5jsnfbff6480fd40"
            }
        })

        .then(function (response) {
            return response.json();
        }).then(function (data) {
            console.log('this is the data, ', data);
            $scope.cards = data;
        });
        
});

我已禁用服务工作线程和所有额外功能，以免干扰 API 的加载时间，但 HTML 文档似乎在 API 获取完成之前完成了加载时间，因此未显示。这是我的想法，但经过大量查看文档后，我陷入了这一点，我错过了什么？

<小时/>

来自 API 的示例数据

data = {
    Basic: [
        {cardId: "GAME_004", dbfId: "1740", name: "AFK", /* ... */ },
        {cardId: "CS2_041e", dbfId: "1853", /* ... */ },
        {cardId: "HERO_09", dbfId: "813", name: "Anduin Wrynn", /* ... */ }, 
        {cardId: "EX1_399e", dbfId: "1621", name: "Berser", /* ... */ },
        //...
    ],
    Battlegrounds: [{…}, {…}, {…},...],
    Blackrock Mountain: [{…}, {…},...],
    //...
}
    

Answer 1

使用$http服务

Fetch API 未与 AngularJS 框架集成。只有在 AngularJS 执行上下文中应用的操作才会受益于 AngularJS 数据绑定(bind)、异常处理、属性监视等。

只需使用$http服务即可:

var url = "https://omgvamp-hearthstone-v1.p.rapidapi.com/cards";
var headers = {
    "x-rapidapi-host": "omgvamp-hearthstone-v1.p.rapidapi.com",
    "x-rapidapi-key": "8ad5a16c67mshed80ba15c31ab54p141ec5jsnfbff6480fd40"
};
var options = { headers };

$http.get(url, options)
  .then(function (response) {
    var data = response.data;
    console.log('this is the data, ', data);
    $scope.dataObj = data;
});

然后以正确匹配数据的方式使用ng-repeat:

<div ng-repeat="(key, cardArr) in dataObj">
   <h2>{{key}}</h2>
   <ul>
     <li ng-repeat="card in cardArr track by card.dbfId">
        {{card.cardId}}: {{card.cardName}}
     </li>
   </ul>
</div>