如何在单击时将数据附加/显示/渲染到页面答案

【问题标题】：How to append/display/render data to page on click如何在单击时将数据附加/显示/渲染到页面
【发布时间】：2015-01-28 05:42:57
【问题描述】：

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

                              /**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])

})();

【问题讨论】：

标签： javascript jquery html json angularjs

【解决方案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>');
    }
};

很遗憾，您的问题不是很清楚，但我希望这会有所帮助。

【讨论】：