Question

我想从API获取数据并将其显示在index.html页面上。这样做的最佳方法是什么？寻找多种方式，即jquery或使用angular进行数据绑定。我似乎无法找出显示我得到的数据的功能。我从两个不同的玩家那里获取两个不同的数据，我想并排显示它们。 API返回JSON数据

                              /**Part of Index.html**/
<body ng-app="lolvs" ng-controller="MainController">

    <div class="throwdown">

        <h1> LoL THROWDOWN </h1>
        <div class="summonerNames">
            <input id="summonerOne" ng-model="summonerOne" placeholder="summoner name">
            <button class="start" ng-click="start()">vs</button>
            <input id="summonerTwo" ng-model="summonerTwo" placeholder="summoner name">
        </div>

                                    /**app.js**/

(function(){
    'use-strict'

var mainCtrl = function mainCtrl($scope, $rootScope, MainFactory) {
    $scope.start = MainFactory.start;

    $rootScope.$on('gotStats', function (e, m) {
        console.log('arguments >>', arguments);

        $scope.player1 = {
            totalChampionKills : 0,
            totalDeathsPerSession : 0,
            totalAssists : 0,
            totalSessionsWon : 0,
            totalSessionsLost :0,
            totalMinionKills: 0,
            totalTurretsKilled: 0,
        };

        $scope.apply();
    });
};

var mainFactory = function ($http, $rootScope) {
    var api = 'api_key=***************************';

    var add = function(data, status, headers) {
        var stats = {
            totalChampionKills : 0,
            totalDeathsPerSession : 0,
            totalAssists : 0,
            totalSessionsWon : 0,
            totalSessionsLost :0,
            totalMinionKills: 0,
            totalTurretsKilled: 0,
        };

        var champions = data.champions;

        for(var i = 0; i < champions.length; i++) {
            var champ = champions[i].stats;

            for(stat in stats) {
                if(champ[stat]) {
                    stats[stat] += champ[stat]
                }
            }
        }
    };

    var start = function(name) {
        var options = { 
            url: 'https://na.api.pvp.net/api/lol/na/v1.4/summoner/by-name/' + name + '?' + api,
            type: 'GET',
            success: summonerOption
        };

        $http(options);
    };

    var summonerOption = function(data, status, headers) {
        var name = Object.keys(data)[0];

        var newOption = {
            url: 'https://na.api.pvp.net/api/lol/na/v1.3/stats/by-summoner/' + data[name].id + '/ranked?season=SEASON4&' + api,
            type: 'GET',
            success: add
        };

        $http(newOption);
    };

    return {
        start: start
    }


};



angular.module('lolvs', [])
    .controller('MainController', ['$scope', '$rootScope', 'MainFactory', mainCtrl])
    .factory('MainFactory', ['$http', '$rootScope', mainFactory])

})();

Answer 1

返回什么样的data？如果它是一个json数组，您可能希望在将整个内容打印到您的网页之前迭代它。但理论上，你应该在成功的ajax调用之后处理data，这似乎是在你的index.html中按<button>之后执行的。

这可能是这样的：

var newOption = {
    url: 'https://na.api.pvp.net/api/lol/na/v1.3/stats/by-summoner/' + data[name].id + '/ranked?season=SEASON4&' + api,
    type: 'GET',
    success: function(data) {
        $('.containerForData').html('<div class="data-wrap">' + data + '</div>');
    }
};

不幸的是，你的问题不是很明确，但我希望这会有所帮助。

如何在点击时附加/显示/渲染数据到页面

1 个答案: