Getting Channel Information Using AngularJS using $HTTP and JSONP

Hello,

I am trying to retrieve channel information using AngularJS.

However i am getting an error: “ReferenceError: jsonp is not defined”

See For Code

Angular JS, only accept “JSON_CALLBACK” as the callback. Still cnt seem to access data.

Hello,

Yes, the $http and/or $resource is quite hard to understand with AngularJS, here is a solution for $http:

index.html:

<!DOCTYPE html>
<html ng-app ="myApp">

<head>
  <script data-require="angular.js@*" data-semver="1.3.0" src="//code.angularjs.org/1.3.0/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>
 
<body ng-controller="MainController">
  {{channel.streams[0]._id}}
  {{channel.streams[0].game}}
</body>

</html>

script.js

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

myApp.controller('MainController', function($scope, $http) {
  
    var url = "https://api.twitch.tv/kraken/streams?channel=lirik&callback=JSON_CALLBACK";
    $http.defaults.headers.common["X-Custom-Header"] = "Angular.js"
    $http.jsonp(url).success(function(data) {
      $scope.channel = data;
    }).error(function(data) {
       $scope.channel = {}
    });
});

Working example: http://plnkr.co/edit/6xKvNz7NojV3gyJyYlpf?p=preview

Have fun,
Schmoopiie!

@Schmoopiie

That’s awesome, i don’t think i would have got that without you.

Now a follow up question, although it’s not specific to the Twitch API and more of an AngularJS question using Twitch. How can i set an interval so that the $http requests runs every 10 seconds and therefore updates the data received from the json file.

Here is what i have tried, hmm thought i had it working then.

Using $interval would work but I’d suggest that you create your own endpoint and refresh it server-side, so it’s less ressource intensive (for Twitch), then you use the $interval in your AngularJS application and point the $http to your own endpoint. You can create a cron job or, if you are using NodeJS with Express, a simple setInterval would work.

Thanks,
Schmoopiie!

Fixed your Plunker with $interval

http://plnkr.co/edit/9nDbG0Ny6pAxZr6Ercm3?p=preview