Getting Channel Information Using AngularJS using $HTTP and JSONP


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.


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


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

  <script data-require="angular.js@*" data-semver="1.3.0" src="//"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
<body ng-controller="MainController">



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

myApp.controller('MainController', function($scope, $http) {
    var url = "";
    $http.defaults.headers.common["X-Custom-Header"] = "Angular.js"
    $http.jsonp(url).success(function(data) {
      $ = data;
    }).error(function(data) {
       $ = {}

Working example:

Have fun,


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.


Fixed your Plunker with $interval