Get online PlanetSide 2 outfit members and show them in a table. uses jQuery & KnockoutJS. See www.redmistoutfit.com for an example (it's in the right sidebar)

member_online_status.html

<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.2.min.js" type="text/javascript"></script>
<script src="//ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js" type="text/javascript"></script>
 
<script type="text/javascript">
(function($) {
	var ViewModel = function(options) {
		var self = this;
		this.options = options;
		this.url = 'http://census.soe.com/get/ps2/outfit_member?c:limit=1000&c:resolve=online_status,character(name,battle_rank,active_profile_id)&c:join=type:profile^list:0^inject_at:profile^show:name.en^on:character.active_profile_id^to:id&id=' + this.options.outfit_tag;
		this.Members = ko.observableArray([]);
		this.HideOffline = ko.observable(true);
		this.IsLoading = ko.observable(false);
		
		this.MembersSorted = ko.computed(function(){
			// filter out records without character data
			var result = ko.utils.arrayFilter(self.Members(), function(item){
				return item.character && item.character.name;
			});
			
			// filter on/off line and sort by name.
			result = ko.utils.arrayFilter(result, function(item){
				return self.HideOffline() ? item.online_status > 0 : true;
			}).sort(function(l,r){ 
				if (!l.character || !l.character.name || !r.character || !r.character.name)
					return -1;
				return l.character.name.first_lower == r.character.name.first_lower ? 0 : (l.character.name.first_lower > r.character.name.first_lower ? 1 : -1 )
			});
			return result;
		});
		
		this.start = function() {
			self.refresh();
		}
		
		this.refresh = function() {
			self.IsLoading(true);
			$.ajax({
				dataType: "jsonp",
				url: this.url
			}).done(function ( data ) {
				self.Members(data.outfit_member_list);
				self.IsLoading(false);
			});
		}
	};
	
	$(function(){
	  	var options = { outfit_tag: '37511178772817792' };
		var viewmodel = new ViewModel(options);
		
		ko.applyBindings(viewmodel, $('#memberlist')[0]);
		viewmodel.start();
	});
})(jQuery);
</script>
<div id="memberlist">
	<div style="float:left; padding-left:10px">
		<span href="#" data-bind="visible: IsLoading">loading...</span>
	</div>
	<div style="float:left; padding-left:10px">
		<label><input type="checkbox" data-bind="checked: HideOffline" />Hide offline members</label>
	</div>
	<div style="float:right; padding-right:10px">
		<a href="#" data-bind="click: refresh">refresh</a>
	</div>
	<table width="100%" style="width:100%">
		<tr style="font-weight:bold">
			<td>
				<span>Player:</span>
			</td>
			<td>
				<span>BR:</span>
			</td>
			<td>
				<span>Playing:</span>
			</td>
		</tr>
		<tbody data-bind="foreach: MembersSorted">
			<tr>
				<td>
					<span data-bind="text: character.name.first"></span>
				</td>
				<td>
					<span data-bind="text: character.battle_rank.value"></span>
				</td>
				<td>
					<span data-bind="text: character.profile.name.en"></span>
				</td>
			</tr>
		</tbody>
	</table>
</div>

btw, adding a toggle is as easy as adding a checkbox with the correct binding to HideOffline.

ie.:

<label><input type="checkbox" data-bind="checked: HideOffline" />Hide offline members</label>

I updated this gist and www.redmistoutfit.com if you want to try this out.