使用 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