mhl/example.js

## example.js
var popitURL = 'http://za-new-import.popit.mysociety.org/api/v0.1';

var today = new Date().toISOString().substring(0, 10);

function endDateAfter(endDate, whenDate) {
  if (!endDate) {
    /* A falsy endDate indicates that the end date is 'future' */
    return true;
  }
  return endDate > whenDate;
}

function stripJSONPFromURL(url) {
  /* A hacky workaround for this bug:

       https://github.com/mysociety/popit-api/issues/69

     This strips out the 'callback' and '_' parameters, but not
     in a robust way...
   */
  return url.replace(/callback=\w+&?/, '').replace(/_=\w+&?/, '')
}

function getPaginatedResults(url, done, error, results) {
  if (typeof results === 'undefined') {
    results = [];
  }
  $.ajax({
    url: url,
    dataType: 'jsonp',
    success: function(data) {
      var nextURL;
      results = results.concat(data.result);
      if ('next_url' in data) {
        nextURL = stripJSONPFromURL(data.next_url);
        getPaginatedResults(nextURL, done, error, results);
      } else {
        done(results);
      }
    },
    error: function(e) {
      error(e);
    }
  });
}

function getPeopleInOrganization(organization_id, callback) {

  /* Ideally, we would want to add:

       ' AND end_date:> ' + today

     ... to this query get current memberships - however, at the
     moment this won't work properly because of the way that 'future'
     dates are indexed in Elasticsearch:

        https://github.com/mysociety/popit-api/issues/63

     Alternatively, the 'at' parameter could be added for the search
     endpoint:

        https://github.com/mysociety/popit-api/issues/64
  */
  var query = 'organization_id:' + organization_id;
  query += ' AND start_date:<' + today;
  query += ' AND role:Member';
  query += '&per_page=100';
  getPaginatedResults(
    popitURL + '/search/memberships?q=' + query,
    function (memberships) {
      var currentMemberships =
        _.filter(
          memberships,
          function (membership) {
            return endDateAfter(membership.end_date, today);
          });
      callback($.unique($.map(
        currentMemberships,
        function (position, i) {
          return position.person;
        })));
    },
    function (error) {
      console.log("Error fetching people in organization " + organization_id);
    }
  );
}

function sortPeople(people) {
  people.sort(function (a, b) {
    if (a.sort_name < b.sort_name)
      return -1;
    if (a.sort_name > b.sort_name)
      return 1;
    return 0;
  });
}

var organizationName = 'National Assembly';
var organizationQuery = '/search/organizations?q=name:"' + organizationName + '"';
$.ajax({
  url: popitURL + organizationQuery,
  dataType: 'jsonp',
  success: function(data) {
    /* This query will actually return any organization whose name
       contains "National Assembly", so find the one with the exact
       name match. See https://github.com/mysociety/popit-api/issues/61
    */
    var organization = _.find(
      data.result,
      function (o) { return o.name == organizationName; }
    );
    getPeopleInOrganization(organization.id, function (people) {
      console.log("Found", people.length, "people");
      var personList = $('#na-members');
      personList.empty();
      sortPeople(people);
      $.each(people, function(i, person) {
        var li = $('<li/>', {class: 'mp'})
        var p = $('<p/>', {class: 'mp-info'});
        var h3 = $('<h3/>');
        var a = $('<a/>', {href: person.pa_url});
        if ('images' in person) {
          var img = $('<img/>', {
            src: person.images[0].url

          });
          li.append(img);
        }
        h3.text(person.name);
        a.append(h3);
        p.append(a);
        li.append(p);
        personList.append(li);
      });
    });
  },
  error: function (e) {
    console.log("Error fetching organizations:", e.message);
  }
});

## index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Tiny PopIt Example</title>
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
    <script src="example.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css"/>
  </head>

  <body>
    <h1>South African Parliament</h1>
    <h2>Current National Assembly Members</h2>
    <ul id="na-members">
      <li>Loading...</li>
    </ul>
  </body>

</html>

## style.css
/*
 from http://www.paulirish.com/2012/box-sizing-border-box-ftw/
 apply a natural box layout model to all elements
*/

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

img {
  max-width: 50px;
}

ul, li {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mp {
  margin: 2em;
  padding: 2em;
  background-color: #ddd;
}

.mp-info {
}
	var popitURL = 'http://za-new-import.popit.mysociety.org/api/v0.1';

	var today = new Date().toISOString().substring(0, 10);

	function endDateAfter(endDate, whenDate) {
	if (!endDate) {
	/* A falsy endDate indicates that the end date is 'future' */
	return true;
	}
	return endDate > whenDate;
	}

	function stripJSONPFromURL(url) {
	/* A hacky workaround for this bug:

	https://github.com/mysociety/popit-api/issues/69

	This strips out the 'callback' and '_' parameters, but not
	in a robust way...
	*/
	return url.replace(/callback=\w+&?/, '').replace(/_=\w+&?/, '')
	}

	function getPaginatedResults(url, done, error, results) {
	if (typeof results === 'undefined') {
	results = [];
	}
	$.ajax({
	url: url,
	dataType: 'jsonp',
	success: function(data) {
	var nextURL;
	results = results.concat(data.result);
	if ('next_url' in data) {
	nextURL = stripJSONPFromURL(data.next_url);
	getPaginatedResults(nextURL, done, error, results);
	} else {
	done(results);
	}
	},
	error: function(e) {
	error(e);
	}
	});
	}

	function getPeopleInOrganization(organization_id, callback) {

	/* Ideally, we would want to add:

	' AND end_date:> ' + today

	... to this query get current memberships - however, at the
	moment this won't work properly because of the way that 'future'
	dates are indexed in Elasticsearch:

	https://github.com/mysociety/popit-api/issues/63

	Alternatively, the 'at' parameter could be added for the search
	endpoint:

	https://github.com/mysociety/popit-api/issues/64
	*/
	var query = 'organization_id:' + organization_id;
	query += ' AND start_date:<' + today;
	query += ' AND role:Member';
	query += '&per_page=100';
	getPaginatedResults(
	popitURL + '/search/memberships?q=' + query,
	function (memberships) {
	var currentMemberships =
	_.filter(
	memberships,
	function (membership) {
	return endDateAfter(membership.end_date, today);
	});
	callback($.unique($.map(
	currentMemberships,
	function (position, i) {
	return position.person;
	})));
	},
	function (error) {
	console.log("Error fetching people in organization " + organization_id);
	}
	);
	}

	function sortPeople(people) {
	people.sort(function (a, b) {
	if (a.sort_name < b.sort_name)
	return -1;
	if (a.sort_name > b.sort_name)
	return 1;
	return 0;
	});
	}

	var organizationName = 'National Assembly';
	var organizationQuery = '/search/organizations?q=name:"' + organizationName + '"';
	$.ajax({
	url: popitURL + organizationQuery,
	dataType: 'jsonp',
	success: function(data) {
	/* This query will actually return any organization whose name
	contains "National Assembly", so find the one with the exact
	name match. See https://github.com/mysociety/popit-api/issues/61
	*/
	var organization = _.find(
	data.result,
	function (o) { return o.name == organizationName; }
	);
	getPeopleInOrganization(organization.id, function (people) {
	console.log("Found", people.length, "people");
	var personList = $('#na-members');
	personList.empty();
	sortPeople(people);
	$.each(people, function(i, person) {
	var li = $('<li/>', {class: 'mp'})
	var p = $('<p/>', {class: 'mp-info'});
	var h3 = $('<h3/>');
	var a = $('<a/>', {href: person.pa_url});
	if ('images' in person) {
	var img = $('<img/>', {
	src: person.images[0].url

	});
	li.append(img);
	}
	h3.text(person.name);
	a.append(h3);
	p.append(a);
	li.append(p);
	personList.append(li);
	});
	});
	},
	error: function (e) {
	console.log("Error fetching organizations:", e.message);
	}
	});
	<!DOCTYPE html>
	<html>
	<head>
	<title>Tiny PopIt Example</title>
	<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
	<script src="example.js"></script>
	<link rel="stylesheet" type="text/css" href="style.css"/>
	</head>

	<body>
	<h1>South African Parliament</h1>
	<h2>Current National Assembly Members</h2>
	<ul id="na-members">
	<li>Loading...</li>
	</ul>
	</body>

	</html>
	/*
	from http://www.paulirish.com/2012/box-sizing-border-box-ftw/
	apply a natural box layout model to all elements
	*/

	, :before, *:after {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	}

	img {
	max-width: 50px;
	}

	ul, li {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
	}

	.mp {
	margin: 2em;
	padding: 2em;
	background-color: #ddd;
	}

	.mp-info {
	}