AngularJS Experiment: Get NPR stations near you

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.3.0-beta.5" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="NPRApp" ng-controller="NPRCtrl">
    <h1>Nearby Public Radio Stations</h1>
    <ul>
      <li ng-repeat="marketCity in marketCities">
        <h2>{{marketCity.label}}</h2>
        <ul>
          <li ng-repeat="station in marketCity.stations">
            <div class="StationInfo">
              <div class="label">
                {{station.orgDisplayName}}
              </div>
              
              <div class="logo" ng-show="station.image.content">
                <!-- Remember to use ng-src instead of src for images -->
                <img ng-src="{{station.image.content}}" alt="{{station.orgDisplayName}}">
              </div>  
              <div class="player">
                <a href="{{station.url.content}}">Listen Live</a>
              </div>
              <div style="clear:both;"> </div>
            </div>
          </li>
        </ul>
      </li>
    </ul>
  </body>

</html>

// The module
var NPRApp = angular.module('NPRApp', []);

// The controller
NPRApp.controller('NPRCtrl', ['$scope', '$http', function ($scope, $http) {
  // Define the Zip Code
  zipcode = 53201;
  // Define the JSON feed
  jsonFeed = "https://query.yahooapis.com/v1/public/yql?q=SELECT%20id%2C%20image%2C%20marketCity%2C%20orgDisplayName%2C%20url.type%2C%20url.typeId%2C%20url.content%20%20FROM%20npr.stations%20WHERE%20zip%3D'"+zipcode+"'%20and%20url.typeId%20%3D%20'10'%3B&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
  // Actually fetch the data
  $http.get(jsonFeed).success(function (data) {
    // Define the unique market cities
    $scope.marketCities = [];
    for (var i = 0; i < data.query.results.station.length; i++){
      // if it isn't already there, add it
      if(i !== 0 && data.query.results.station[i].marketCity !== data.query.results.station[i-1].marketCity){
        $scope.marketCities.push({ label: data.query.results.station[i].marketCity, stations: [data.query.results.station[i]]});
      }else if(i == 0){
        $scope.marketCities.push({ label: data.query.results.station[i].marketCity, stations: [data.query.results.station[i]]});
      }else if(data.query.results.station[i].id !== data.query.results.station[i-1].id){
        // is the market already there? well, just add the station then.
        $scope.marketCities[$scope.marketCities.length-1].stations.push(data.query.results.station[i]);
      }
      
    }
  });
}]);

/* Styles go here */

.StationInfo .label {
  font-weight: bold;
}
.StationInfo .logo {
  float:left;
  height: 30px;
  margin-right: 40px;
  margin-bottom: 12px;
  vertical-align: middle;
}
.StationInfo .player {
  float:left;
  height: 30px;
  margin-bottom: 15px;
  vertical-align: middle;
}
.StationInfo {
  margin: 2px;
  padding: 6px;
  width:50%;
}

ul {
  list-style-type:none;
}

# Find nearby public radio stations #
## An experiment in AngularJS ##

***What is this?***  It is an experiment into some of what you can do with AngularJS.  I used YQL to get a listing of public radio stations near me.  I used the variable 'zipcode' to define where I am but that value can be determined automatically.

***Who am I?***  I am Joe Steinbring.  I am a coder from Milwaukee, WI.  You can find me at http://steinbring.net.