Skip to content

Instantly share code, notes, and snippets.

@p-stewart
Last active August 29, 2015 14:17
Show Gist options
  • Save p-stewart/bbbace5c7350a3585972 to your computer and use it in GitHub Desktop.
Save p-stewart/bbbace5c7350a3585972 to your computer and use it in GitHub Desktop.
Webpage that displays a list of routes using the AngularJS framework. I'm having problems getting the AJAX call to deliver data to the UI. The data in question is currently hardcoded in the "routeList" variable.
angular.module('index', ['data'])
.controller('IndexController', ['routeList', function (routeList) {
//*
this.routeList = routeList.sort(routeList.getAjaxData());
/*/
this.get = function () {
//routeList.getAjaxData();
this.routeList = routeList.getAjaxData();
console.log(JSON.stringify(this.routeList)); //proves we are getting data, currently note getting data
//this.routeList = [{ "routeOffsetID": "1", "routeAbbr": "1", "name": "Pontiac - Dhu Varren" }, { "routeOffsetID": "2", "routeAbbr": "10", "name": "Ypsilanti - Northeast" }, { "routeOffsetID": "3", "routeAbbr": "11", "name": "Ypsilanti - South" }, { "routeOffsetID": "36", "routeAbbr": "12A", "name": "Miller - Liberty" }, { "routeOffsetID": "37", "routeAbbr": "12B", "name": "Liberty - Miller" }, { "routeOffsetID": "5", "routeAbbr": "13", "name": "Newport" }, { "routeOffsetID": "30", "routeAbbr": "14", "name": "Geddes - E Stadium" }, { "routeOffsetID": "6", "routeAbbr": "15", "name": "Scio Church - W Stadium" }, { "routeOffsetID": "7", "routeAbbr": "16", "name": "Ann Arbor - Saline Rd" }, { "routeOffsetID": "8", "routeAbbr": "17", "name": "Amtrak - Depot" }, { "routeOffsetID": "9", "routeAbbr": "18", "name": "Miller - University" }, { "routeOffsetID": "10", "routeAbbr": "1U", "name": "Pontiac - University" }, { "routeOffsetID": "11", "routeAbbr": "2", "name": "Plymouth" }, { "routeOffsetID": "4", "routeAbbr": "20", "name": "Ypsilanti Grove - Ecorse" }, { "routeOffsetID": "13", "routeAbbr": "22", "name": "North-South Connector" }, { "routeOffsetID": "12", "routeAbbr": "2C", "name": "Plymouth Glazier South" }, { "routeOffsetID": "14", "routeAbbr": "3", "name": "Huron River" }, { "routeOffsetID": "15", "routeAbbr": "33", "name": "College of Business Shuttle" }, { "routeOffsetID": "16", "routeAbbr": "351", "name": "AF Briarwood to SU" }, { "routeOffsetID": "17", "routeAbbr": "352", "name": "AF Briarwood to Main" }, { "routeOffsetID": "18", "routeAbbr": "353", "name": "AF Pioneer to SU" }, { "routeOffsetID": "19", "routeAbbr": "354", "name": "AF Pioneer to Main" }, { "routeOffsetID": "20", "routeAbbr": "36", "name": "Wolverine Tower Shuttle" }, { "routeOffsetID": "21", "routeAbbr": "39", "name": "AOS TEST ROUTE" }, { "routeOffsetID": "22", "routeAbbr": "4", "name": "Washtenaw" }, { "routeOffsetID": "24", "routeAbbr": "46", "name": "Huron - Textile" }, { "routeOffsetID": "25", "routeAbbr": "5", "name": "Packard" }, { "routeOffsetID": "26", "routeAbbr": "501", "name": "Pontiac - Huron High" }, { "routeOffsetID": "27", "routeAbbr": "502", "name": "Plymouth - Huron High" }, { "routeOffsetID": "28", "routeAbbr": "505", "name": "Packard-Huron High" }, { "routeOffsetID": "29", "routeAbbr": "6", "name": "Ellsworth" }, { "routeOffsetID": "31", "routeAbbr": "609", "name": "Dexter - University" }, { "routeOffsetID": "32", "routeAbbr": "7", "name": "South Main - East" }, { "routeOffsetID": "33", "routeAbbr": "710", "name": "ExpressRide Chelsea" }, { "routeOffsetID": "34", "routeAbbr": "711", "name": "ExpressRide Canton" }, { "routeOffsetID": "35", "routeAbbr": "787", "name": "AirRide" }, { "routeOffsetID": "38", "routeAbbr": "8", "name": "Pauline" }, { "routeOffsetID": "23", "routeAbbr": "9", "name": "Dexter - Jackson" }];
};
//*/
}]);
angular.module('data', [])
.factory('routeList', ['$http', function ($http) {
var URI = 'models/GetRouteNames.aspx';
var routeList;
function getRouteNames() {
/*
return $http.get(URI).success(function (data) {
routeList = data;
//console.log(JSON.stringify(routeList)); //proves we are getting data
});
/*/
return routeList = [{ "routeOffsetID": "1", "routeAbbr": "1", "name": "Pontiac - Dhu Varren" }, { "routeOffsetID": "2", "routeAbbr": "10", "name": "Ypsilanti - Northeast" }, { "routeOffsetID": "3", "routeAbbr": "11", "name": "Ypsilanti - South" }, { "routeOffsetID": "36", "routeAbbr": "12A", "name": "Miller - Liberty" }, { "routeOffsetID": "37", "routeAbbr": "12B", "name": "Liberty - Miller" }, { "routeOffsetID": "5", "routeAbbr": "13", "name": "Newport" }, { "routeOffsetID": "30", "routeAbbr": "14", "name": "Geddes - E Stadium" }, { "routeOffsetID": "6", "routeAbbr": "15", "name": "Scio Church - W Stadium" }, { "routeOffsetID": "7", "routeAbbr": "16", "name": "Ann Arbor - Saline Rd" }, { "routeOffsetID": "8", "routeAbbr": "17", "name": "Amtrak - Depot" }, { "routeOffsetID": "9", "routeAbbr": "18", "name": "Miller - University" }, { "routeOffsetID": "10", "routeAbbr": "1U", "name": "Pontiac - University" }, { "routeOffsetID": "11", "routeAbbr": "2", "name": "Plymouth" }, { "routeOffsetID": "4", "routeAbbr": "20", "name": "Ypsilanti Grove - Ecorse" }, { "routeOffsetID": "13", "routeAbbr": "22", "name": "North-South Connector" }, { "routeOffsetID": "12", "routeAbbr": "2C", "name": "Plymouth Glazier South" }, { "routeOffsetID": "14", "routeAbbr": "3", "name": "Huron River" }, { "routeOffsetID": "15", "routeAbbr": "33", "name": "College of Business Shuttle" }, { "routeOffsetID": "16", "routeAbbr": "351", "name": "AF Briarwood to SU" }, { "routeOffsetID": "17", "routeAbbr": "352", "name": "AF Briarwood to Main" }, { "routeOffsetID": "18", "routeAbbr": "353", "name": "AF Pioneer to SU" }, { "routeOffsetID": "19", "routeAbbr": "354", "name": "AF Pioneer to Main" }, { "routeOffsetID": "20", "routeAbbr": "36", "name": "Wolverine Tower Shuttle" }, { "routeOffsetID": "21", "routeAbbr": "39", "name": "AOS TEST ROUTE" }, { "routeOffsetID": "22", "routeAbbr": "4", "name": "Washtenaw" }, { "routeOffsetID": "24", "routeAbbr": "46", "name": "Huron - Textile" }, { "routeOffsetID": "25", "routeAbbr": "5", "name": "Packard" }, { "routeOffsetID": "26", "routeAbbr": "501", "name": "Pontiac - Huron High" }, { "routeOffsetID": "27", "routeAbbr": "502", "name": "Plymouth - Huron High" }, { "routeOffsetID": "28", "routeAbbr": "505", "name": "Packard-Huron High" }, { "routeOffsetID": "29", "routeAbbr": "6", "name": "Ellsworth" }, { "routeOffsetID": "31", "routeAbbr": "609", "name": "Dexter - University" }, { "routeOffsetID": "32", "routeAbbr": "7", "name": "South Main - East" }, { "routeOffsetID": "33", "routeAbbr": "710", "name": "ExpressRide Chelsea" }, { "routeOffsetID": "34", "routeAbbr": "711", "name": "ExpressRide Canton" }, { "routeOffsetID": "35", "routeAbbr": "787", "name": "AirRide" }, { "routeOffsetID": "38", "routeAbbr": "8", "name": "Pauline" }, { "routeOffsetID": "23", "routeAbbr": "9", "name": "Dexter - Jackson" }];
//*/
}
function sortList(list) {
list.sort(sortAlphaNum);
var includeList = ['1U', '2C', '12A', '12B', '609', '711', '710'];
var cleanlist = [];
list.every(function (route) {
// Work around to suppress unwanted items
if (route.routeAbbr < 100 && route.routeAbbr != 39 || includeList.indexOf(route.routeAbbr) > -1) {
cleanlist.push(route);
}
return true;
});
return cleanlist;
}
function sortAlphaNum(c, d) {
var a = c.routeAbbr;
var b = d.routeAbbr;
var reA = /[^a-zA-Z]/g;
var reN = /[^0-9]/g;
var aA = a.replace(reA, "");
var bA = b.replace(reA, "");
if (aA === bA) {
var aN = parseInt(a.replace(reN, ""), 10);
var bN = parseInt(b.replace(reN, ""), 10);
return aN === bN ? 0 : aN > bN ? 1 : -1;
} else {
return aA > bA ? 1 : -1;
}
}
getRouteNames();
return {
routeNames: routeList, //Call this variable instead of the method to insure AJAX returns?
sort: sortList,
getAjaxData: getRouteNames
}
}]);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>
Track My Bus
</title>
<!-- Styles -->
<link rel="stylesheet" href="resources/styles.css" />
<link href="resources/bootstrap.min.css" rel="stylesheet" />
<script src="resources/angular.min.js"></script>
</head>
<body class="container" data-ng-app="index">
<header id="header" class="row">
<a id="logoLink">
<img id="logo" class="" src="resources/logo-m.gif" alt="The Ride" />
</a>
<h1>Track My Bus</h1>
</header>
<main class ="row">
<div id="routeList" class="col-sm-6" data-ng-controller="IndexController as index">
<h2>Choose a Route</h2>
<ul >
<li data-ng-repeat="route in index.routeList"><a id="{{route.Abbr}}" class="" href="route.html?route={{route.routeAbbr}}">{{route.routeAbbr}} - {{route.name}}</a></li>
</ul>
<div id="removeME" style="display:none;">
<button data-ng-click="index.get()">Get</button>
<p data-ng-repeat="route in index.routeList">{{route.name}}</p>
</div>
</div>
</main>
<footer id="footer" class="row" style="font-size:1em;">
<hr style="color:#6ACFF6;font-size:1em;">
<br />
<p>
&copy; 2015, TheRide
<br>General Info: 734.973.6500
<br>Routes and Schedules: 734.996.0400
</p>
</footer>
<!-- Scripts -->
<script src="services/data.js"></script>
<script src="controllers/indexController.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment