使用 angular js (fetch) 从大型 API 动态呈现答案

Question

我的目标是创建一个函数来显示游戏中的炉石卡牌。 我的 API 正在工作，我正在从 API 获取数据，这里没问题。 我遇到的问题是在我的 HTML 页面中显示结果。

我在 angular 标签 {{ }} 中尝试了不同的对象调用，但我得到的最接近的是给我 [[Object Object]] 的结果。

现在我正在努力让 API 和 HTML 页面正常工作，所以一切都是同步的，所以我不是通过数据在搜索引擎上寻找完整的解决方案，只是为了让它与我的 HTML 页面同步并显示我正在调用的数据（特定的硬编码数据位置）。

这是控制器内部的所有代码：

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

produkterControllers.controller('minApiFunktionController', function myController($scope, $http, $q) {
    var fetchPromise = 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"
            }
        })

    var angularPromise = $q.when(fetchPromise);

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

这是 index.html 中应该显示结果的代码（与问题相关）

<div ng-controller="minApiFunktionController">
    <ul>
        <li ng-repeat="item in cards">
            <p> 
                <span>{{item.Basic.cardId}}</span>
            </p>
        </li>
    </ul>
</div>

只是为了澄清我导入了控制器并且 index.html 包含模块，显示此代码以澄清控制器已连接到我的 index.html 页面。

<html ng-app="produkterControllers">

Answer 1

也许 $scope.cards 不是数组，并且不会在 ng-repeat 中显示

使用 angular js (fetch) 从大型 API 动态呈现答案

问题描述

1 个解决方案

解决方案1
0 2019-12-03 06:23:37

使用 angular js (fetch) 从大型 API 动态呈现答案

问题描述

1 个解决方案

解决方案1 0 2019-12-03 06:23:37

解决方案1
0 2019-12-03 06:23:37