Cannot read response from AngularJS $resource JSONP get from Google Finance

I am following the tutorial at http://www.youtube.com/watch?v=IRelx4-ISbs to use AngularJS $resource to get JSON data of a stock index, such as the S&P 500, from Google Finance. However, when I write the result to console, I do not see the data. I get this in Google Chrome's console:

  • e
  • __proto: 3
  • $delete
  • $get
  • $query
  • $remove
  • $save
  • constructor
  • __proto

However, when I go to "Network" in Chrome's console, I see the get in the Name Path left column. When I click on the "info, I see five tabs on the right panel. Under the Preview and Response tabs, I see the correct data. I just don't know how to see or retrieve that in my Javascript.

I attempted to put my code to http://jsfiddle.net/curt00/ycYn7/ but Google Chrome's console is giving me "Uncaught Error: No module: Twitter". (Does anybody know how to get around this error?) Here is the HTML code from my jsfiddle:

<!doctype html>
<html ng-app="Twitter">
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular-resource.min.js">
        </script>
    </head>
<body>
    <div ng-controller="TwitterCtrl"></div>
</body>
</html>

Here is the Javascript code from my jsfiddle:

angular.module('Twitter', ['ngResource']);

function TwitterCtrl($scope, $resource) {

var tickerSymbol = "INDEXSP:.INX";

var tempurl = 'https://finance.google.com/finance/info?client=ig&q=' + tickerSymbol.replace(":","%3A") + '&callback=?:action';

$scope.googleFinance = $resource(tempurl,
                                   {action:'&test=', q:'test', callback:'JSON_CALLBACK'},
                             {get:{method:'JSONP'}});

$scope.indexResult = $scope.googleFinance.get();

console.log('indexResult: ',$scope.indexResult);
}

Can anybody suggest how my code should be changed so that I can fetch the data from the response?

There are at least 2 things that are not correct:

  1. You are duplicating the parameters on your request. The tempurl should not contain any paramaters (i.e. https://finance.google.com/finance/info). If you want to pass parameters, do it within the actions ('get', 'post', 'delete', etc...) or set default parameters. For more information, check the angular.js $resource documentation.

  2. Google Finance response is actually an array, therefore you need to add isArray: true to your GET action in order for it to work

jsFiddle: http://jsfiddle.net/8zVxH/1/

P.S. I'm not familiar with the Google Finance API, so I don't know if the results are the ones you expect. I've just 'fixed' your jsFiddle without changing the logic...