Meetup.com API display for 804RVA

by tlarson

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.6.0/moment.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.min.js"></script>
<div id="meetupTarget">Loading...</div>

<script id="meetupTemplate" type="x-tmpl-mustache">
{{#results}}
<div>
    <a href={{event_url}}>{{name}}</a> {{yes_rsvp_count}} people coming!
    <br />
    {{meetingTime}}
    <br />
    {{{description}}}
    <hr>
</div>
{{/results}}
</script>

JavaScript

$.ajax({
    url: "https://api.meetup.com/2/events?&sign=true&group_id=2764072&page=20&key=204d363b7b3b39326a40171373723c55",
    cache: false,
    success: function(data, textStatus, jqXHR) {
      console.log(data);
        render(data);
    },
    dataType: "jsonp"
});

function render(data) {
  var meetupTemplate = $('#meetupTemplate').html();
  Mustache.parse(meetupTemplate);   // optional, speeds up future uses
  
  data.meetingTime = function () {
    return moment(this.time).format("dddd, MMMM Do YYYY, h:mm:ss a");
  }
    
  var rendered = Mustache.render(meetupTemplate, data);
  $('#meetupTarget').html(rendered);
}

/*
1. Get Meetup Key (private)
    https://secure.meetup.com/meetup_api/key/
2. Hit URL endpoint you want to use, inserting private key
     https://api.meetup.com/2/events?&sign=true&group_id=2764072&page=20&key=[key]
     (API call doc: http://www.meetup.com/meetup_api/console/?path=/2/events)
3. In response from #2, look for "signed_url" property.  This can be used in the js app to get a list of events (or whatever was requested in #2)
4. Create widget (code in this fiddle).  Use URL from #3 to retrieve data for widget
5. Add widget to site
    http://weeblyforums.com/2012/04/how-to-add-javascript-to-weebly/

*/