recked
3/12/2014 - 2:26 PM

Connecting Twitch API to Angular

Connecting Twitch API to Angular

//Initialize the App

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


//console.log('Anyone home?');

//main controller

app.controller("MainController",  function ($scope, $http) {

        //Where controller variables are assigned 
        
         // create the game Object
    $scope.result = {};
        
        //$scope.result.game = '';
        
        
        $http.jsonp('https://api.twitch.tv/kraken/games/top?callback=JSON_CALLBACK').success(function(data){
                                $scope.result= data;
                        //$scope.twitch = $scope.games.data;
                        //console.log(data);
                        //.log(data.top);
                        console.log($scope.result);
                }).error(function (data) {
                                // something went wrong :(
                                console.log('Got nothing');
                          });
                
                //console.log($scope.result);
                
});
//Initialize the App

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


//console.log('Anyone home?');

//main controller

app.controller("MainController",  function ($scope, $http) {

        //Where controller variables are assigned 
        
         // create the game Object
    $scope.result = {};
        
        //$scope.result.game = '';
        
        
        $http.jsonp('https://api.twitch.tv/kraken/games/top?callback=JSON_CALLBACK').success(function(data){
                                $scope.result= data;
                        //$scope.twitch = $scope.games.data;
                        //console.log(data);
                        //.log(data.top);
                        console.log($scope.result);
                }).error(function (data) {
                                // something went wrong :(
                                console.log('Got nothing');
                          });
                
                //console.log($scope.result);
                
});
<!DOCTYPE html>
<html ng-app='Twitch'>
        <head>
                <title>Twitch</title>
                <link type="text/css" rel="stylesheet" href="css/main.css"/>
        </head>
        <body>
        

                <div id='wrap'>
                
                        <div id='gamelist'>
                                <div ng-controller='gameList'>
                                        <li ng-repeat="game in result.top">
                                                <h4 ng-click=''>{{result.top[$index].game.name}}</h4>
                                        </li>
                                </div>
                        </div><!-- End Gamelist -->
                        
                        <!--<div id='gameinfo'>
                                <div ng-controller='gameInfo'>
                                        <li ng-repeat="game in result.top">
                                                {{result.top[$index].game.name}}
                                        </li>
                                </div>
                        </div><!-- End Gamelist -->
                        
                        
                        
                        
                </div><!-- End Wrap -->
                
        
        
                <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js" type="text/javascript"></script>
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
                
                <script src="js/app.js" type="text/javascript"></script>
                <script src="js/controllers/gameList.js" type="text/javascript"></script>
        
                
        </body>
</html>