Finding events dynamically using Meetup API (Front end/Javascript)

In this post I'll be running through how you can use the Meetup API to dynamically find events (just one example of a number of possibilities) based on a location. This can come in handy if you want to return a list of nearby events to a users location, and I've personally used the API in an app which generates a list of tech events. I'll keep the tutorial simple, so even if you haven't used any APIs before this should be a gentle introduction.

Meetup is a social networking app which allows members to create groups covering various interests and provides a platform for the groups to organise meetups in the real world (there are a lot of tech meetups and I would recommend all student/junior developers to try and attend a few of these). The Meetup API allows applications to interact with the Meetup databases to do a number of things, and I'll just be covering how to get a list of events from a particular category (e.g. tech/films/pets/social), within a specified distance from the users address. This will all be done in a few lines of Javascript, and so we won't need to do anything on the back end.

So lets get started.

The first thing you need to do in order to be able to interact with the Meetup API, is to acquire an API key, which basically authorises you to interact with the Meetup databases through queries. I'm not going to run you through this step, all you need to do is create an account with Meetup if you don't already have one, and then go to meetup.com/meetup_api/key/ to get your API key. After you've done this I would advise having a quick look over the documentation to get an idea of how requests are made and how information is returned.

Meetup provide a handy online API console where you can test out queries and see what kind of data is returned. On the right of the screen, there is a list of API methods:

To get a list of events, based on location and category, we will use the version 2 method GET /2/open_events - so scroll down the list of API methods until you find this one and select it.

It will take you to the documentation page for the method, which includes a link to the API console page for this method where you can experiment with various arguments to create a query and inspect the response you get back. You will now see a form where you can specify these parameters - it will look something like the following (the image below only captures some of the available inputs):

For each method, there is good documentation detailing how it works, and explains each of  the request parameters. For the method we'll be using, the documentation is available here - have a look over this before reading on. For our purpose, we are interested in only a number of the available parameters, so I won't be covering them all in this tutorial.

As we are going to be finding events based on a category (or a number of categories) we need to know the category ID for the category we are interested in. This can be determined by using the API console for the GET /2/categories method and clicking the show response button, which will return a list of the categories and their associated ID's; we can see that the ID for 'Tech' is 34 and I will use this category.

Most of the parameters are optional, however there are some which are required and these fields have a yellow background in the console. A location to search is needed, and there are a number of ways to specify this including lat/lng coordinates and country/city/state. Additionally, we can specify a distance to search from the location - the default is 25 miles but we can set this to anywhere between 1 and 100 miles; this is defined under the 'radius' property. For now, just use any location and radius but be sure to specify a radius instead of leaving the field empty - this is important as it will allow us to dynamically change the search distance based on the users preference.  The property 'text_format' can be set to either 'plain', 'html' or 'simplehtml' and determines whether the description is returned in formatted html or plain text. As we are looking to get a number of events back and display them neatly, the best option is text as it omits any fancy text and pictures being returned, ensuring consistency.

The API returns events in JSON format, which is simple and easy to work with. If you haven't worked with JSON data before, dont't be intimidated - check out this simple introduction to JSON before reading on. You'll quickly realise when you take a look at the data the API returns, that there are a number of attributes which aren't of interest - take a look at this JSON object representing an event which was returned to me from the console:

  • {
    • "utc_offset": 3600000,
    • "venue": {
      • "country": "gb",
      • "localized_country_name": "United Kingdom",
      • "city": "Edinburgh",
      • "address_1": "Argyle House, 3 Lady Lawson Street Edinburgh, EH3 9DR",
      • "name": "Codebase",
      • "lon": -3.201771,
      • "id": 19888452,
      • "lat": 55.946949,
      • "repinned": false

      },

    • "headcount": 0,
    • "distance": 1.1469477415084839,
    • "visibility": "public",
    • "waitlist_count": 0,
    • "created": 1463476826000,
    • "maybe_rsvp_count": 0,
    • "description": "Brian Swan is coming to talk to us about refactoring code this month. Refactoring is the process of restructuring existing code without changing its external behaviour. It’s frequently used to make it easier to alter a program when it isn’t immediately clear where you can change it. However, it can be hard to make the leap from understanding how to refactor a small class or function to understand how to refactor a larger system in a big codebase. Brian has worked a number of companies with large codebases, including currently at FreeAgent. These Jumbo Refactors can be challenging and are always educational, so we can look forward to some strong lessons this month. More details, as usual, on our website. Hope to see you there!",
    • "event_url": "https://www.meetup.com/meetup-group-Xwgucjde/events/243209305/",
    • "yes_rsvp_count": 13,
    • "name": "Jumbo Refactoring - a talk from Brian Swan",
    • "id": "mljltlywmbsb",
    • "time": 1505408400000,
    • "updated": 1505115062000,
    • "group": {
      • "join_mode": "open",
      • "created": 1421400022000,
      • "name": "Scottish Ruby User Group",
      • "group_lon": -3.2100000381469727,
      • "id": 18342319,
      • "urlname": "meetup-group-Xwgucjde",
      • "group_lat": 55.95000076293945,
      • "who": "Rubyists"

      },

    • "status": "upcoming"

    },

For our purposes, we aren't interested in things like the group urlname or the event id, so we will use the 'only' parameter to filter those attributes which are returned. I've specified the only attributes to be returned as the following: name, description, event_url, time and venue. These values must be separated by a comma and WITHOUT ANY SPACES BETWEEN THEM. If attributes are nested within other objects, you can use a dot to join the attributes; if you wanted, for example the name of the group to be returned, you would enter group.name as an argument.

As mentioned before, our app will display a list of tech events within a specified distance from the users location. Once you are happy with the JSON objects the query is returning, we are ready to use the URL in our program. Scroll down to just below the console where you can enter parameters, and you will see 'Request URL' and 'Signed URL'. Let me quickly explain the difference. You're API key is linked to your account (which you signed up for at the start of the tutorial) and allows you to make a certain number of requests to Meetup each hour. It shouldn't be shared with others as this could push your request rate over the limit. The problem is that as this is a front end application written in JavaScript, your key will be included in your code which can be viewed by anyone and is therefore vulnerable to be stolen and used by someone else in their app. The signed URL which you are provided with deals with this issue:

"key-signed requests may be reused and recycled as long as their corresponding API key is valid. If a signed URL is released to the public, any application can use it to interact with Meetup as if it had that API key; the difference is that it can not change definitive parameters or use the signature against other API methods" - meetup.com

While we cannot change definitive parameters, we can change the location and radius and the query will still work. In my app I use Google Maps address autocomplete API to get the users location and a slider to allow the user to select a search distance in miles. The lat/lng coords can be extracted from this location object by the methods getLat()/getLng() and the lat, lng and radius can be passed into a simple function which creates a query string. Firstly though, you need split up the signed URL into different parts after 'lat=', lon=' and 'radius=' and remove the current values. As demonstrated in the below function, we are concatenating the different parts of the signed URL with the user-defined values to create a complete query string.

function createMeetupAPIString(lat, lng, distance){

var q1 = 'https://api.meetup.com/2/open_events?and_text=False&offset=0&format=json&lon=';
var q2 = '&limited_events=False&text_format=plain&only=name%2Cdescription%2Cevent_url%2Ctime%2Cvenue&photo-host=public&page=30&radius=';
var q3 = '&category=34&lat=';
var q4 = '&desc=False&status=upcoming&sig_id=216618862&sig=a3db75bd287bc8af20a76484dac69bf3129be91d';

var query = q1 + lng + q2 + distance + q3 + lat + q4;

return query;
}

This query string can now be used in an AJAX request, and the returned events can be displayed by your web app. To see a working example, check out my Tech Event Finder App.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.