Angular.JS: HTTP-JSONP YAHOO.Finance.SymbolSuggest

JSONP-GET call to Yahoo YQL API for auto-completion of names of traded stocks.

by Matthias Heise

HTML

<div ng-app='MyModule' ng-controller='DefaultCtrl'>
    <p>{{ companyName }}</p>
    <p>
        <input auto-complete ui-items="names" ng-model="selected">
        selected = {{selected}}
    </p>
    <p>{{ resultSet }}</p>
</div>

JavaScript

function DefaultCtrl($log, $scope, $http, myService) {

    // this should actually be dynamic (from HTTP getSuggestions)
    $scope.names = ["john", "bill", "charlie", "robert", "alban", "oscar", "marie", "celine", "brad", "drew", "rebecca", "michel", "francis", "jean", "paul", "pierre", "nicolas", "alfred", "gerard", "louis", "albert", "edouard", "benoit", "guillaume", "nicolas", "joseph"];
    
    var promise = myService.getSuggestions('yahoo');

    promise.then(
          function(payload) { 
              $log.info('receiving data', payload);
              $scope.companyName = payload[0].tooltip;
              $scope.resultSet = payload;
              $log.info('received data', payload);
          },
          function(errorPayload) {
              $log.error('failure loading suggestions', errorPayload);
          });    
}
    
angular.module('MyModule', [])
.directive('autoComplete', function($timeout) {
        return function(scope, iElement, iAttrs) {
                iElement.autocomplete({
                    source: scope[iAttrs.uiItems],
                    select: function() {
                        $timeout(function() {
                          iElement.trigger('input');
                        }, 0);
                    }
                });
        };
    })
.factory('myService', function ($http, $log, $q) {
    return {
        getSuggestions: function (symbol) {            
            
            var YAHOO = window.YAHOO = {Finance: {SymbolSuggest: {}}};
            YAHOO.Finance.SymbolSuggest.ssCallback = function (data) 
            {
                $log.info("received data", data);
                
                var result = [];
                angular.forEach(data.ResultSet.Result, function(stock)
                {
                    result.push({
                        name : stock.name,
                        tooltip : stock.name + ' (' + stock.symbol + ', ' + stock.exchDisp + ')',
                        value : stock
       ...