Using JavaScript to integrate with the EventBrite API

This post is more than 2 years old.

Almost a year ago I blogged about using the EventBrite API with ColdFusion. At that time, I was under the impression that all uses of the EventBrite API required a private OAuth token. This means it would not be possible to use the data on the client-side. (Unless you used a server to proxy the API calls for you of course.) But after speaking to Mitch Colleran from EventBrite, I was happy to discover I was wrong.

Turns out, when you create an app on the EventBrite developer portal, you actually get both a regular OAuth token and secret as well as an anonymous oauth token:

shot1

By using the anonymous oath token, you can read any public data you want, all without having to use a secure key. This means you can use the EventBrite API in a JavaScript app (desktop, mobile, hybrid, etc.) without worrying about keeping your key secret. In fact, their API is so easy to use you can actually pass in the anon key right in the URL.

As an example, given that token represents your anon oath token, this will get all public events:

https://www.eventbriteapi.com/v3/events/search/?token='+token

Obviously you probably want your own events, not the entire worlds. While it is trivial to restrict the results to your own organization, oddly it is still a bit awkward to get your organizer id. As I said in the old post, go to your profile and then your organization settings. You'll see your organizer URL with the ID at the end:

You can then pass it to the URL:

https://www.eventbriteapi.com/v3/events/search/?token='+token+'&organizer.id=8231868522&expand=venue'

In case you're curious, the expand=venue option there just tells the API to return venue information. Without it, you get the ID of the venue and could do more HTTP calls to get it, but returning it all at once is simpler.

Ok, so why bother? EventBrite already has embed options, right? Well they do - and those are nice - but if you want more control over the embed experience then you'll want the ability to write out the data as you see fit.

Here's an incredibly simple example that fetches events and displays them in a list.

<html>
<head>
	<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
	<script>
	$(document).ready(function() {
		
		var token = 'GGAQ2BUKIRGJMZMU55YZ';
		var $events = $("#events");
		
		$.get('https://www.eventbriteapi.com/v3/events/search/?token='+token+'&organizer.id=8231868522&expand=venue', function(res) {
			if(res.events.length) {
				var s = "<ul class='eventList'>";
				for(var i=0;i<res.events.length;i++) {
					var event = res.events[i];
					console.dir(event);
					s += "<li><a href='" + event.url + "'>" + event.name.text + "</a> - " + event.description.text + "</li>";
				}
				s += "</ul>";
				$events.html(s);
			} else {
				$events.html("<p>Sorry, there are no upcoming events.</p>");
			}
		});
		
		
	});
	</script>
</head>
<body>
	
<h2>Upcoming Events!</h2>
<div id="events"></div>
</body>
</html>

As I said, this is simple, so simple I assume it just makes sense, but if not, let me know in the comments below. After building this for an organization, I then worked on making it a bit nicer. For example, I formatted the Date using Moment.js:

<html>
<head>
	<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.js"></script>
	<script>
	$(document).ready(function() {
		
		//anon oauth token
		var token = 'GGAQ2BUKIRGJMZMU55YZ';
		//org id
		var organizer = '8231868522';

		var $events = $("#events");
		
		$events.html("<i>Loading events, please stand by...</i>");
		$.get('https://www.eventbriteapi.com/v3/events/search/?token='+token+'&organizer.id='+organizer+'&expand=venue', function(res) {
			if(res.events.length) {
				var s = "";
				for(var i=0;i<res.events.length;i++) {
					var event = res.events[i];
					var eventTime = moment(event.start.local).format('M/D/YYYY h:mm A');
					console.dir(event);
					s += "<div class='eventList'>";
					s += "<h2><a href='" + event.url + "'>" + event.name.text + "</a></h2>";
					s += "<p><b>Location: " + event.venue.address.address_1 + "</b><br/>";
					s += "<b>Date/Time: " + eventTime + "</b></p>";
					
					s += "<p>" + event.description.text + "</p>";
					s += "</div>";
				}
				$events.html(s);
			} else {
				$events.html("<p>Sorry, there are no upcoming events.</p>");
			}
		});
		

		
	});
	</script>
</head>
<body>
	
<h2>Upcoming Events!</h2>
<div id="events"></div>
</body>
</html>

I love Moment.js. By the way, that code to display the event is a bit brittle. For example, it assumes a venue exists when it may not have that data. It could also show more of the venue too. Basically, remember that EventBrite events are complex so you'll want to use conditionals and the like to determine what to display. And yeah, generating the layout in JavaScript like that is ugly. Check out my video series on JavaScript templating for ways to make this nicer.

I then kicked this up a notch. The person who had asked for help mentioned they wanted to display events from multiple organizations. So I built a method that lets you pass in either an org, or an array of orgs, and your key, and then use a promise to return a sorted array of events when done:

function getEvents(organizers,token) {
	var def = $.Deferred();
	if(organizers.constructor !== Array) {
		organizers = [organizers];
	}
	
	var defs = [];
	for(var i=0;i<organizers.length;i++) {
		defs.push($.get('https://www.eventbriteapi.com/v3/events/search/?token='+token+'&organizer.id='+organizers[i]+'&expand=venue'));
	}
	var data = [];
	$.when.apply($, defs).done(function() {
		// when we had one deferred, arguments is 'normal'
		// when we have 2+, its one argument array per result
		if(organizers.length === 1) {
			def.resolve(arguments[0].events);
		} else {
			for(var i=0;i<arguments.length;i++) {
				data.push.apply(data, arguments[i][0].events);
			}
			data.sort(function(a,b) {
				var aDate = new Date(a.start.utc);
				var bDate = new Date(b.start.utc);
				return aDate > bDate;
			});
			def.resolve(data);
		}
	});
	return def.promise();

}

And to use it, you can do code like this:


var token = 'NG6HEAKRAAXCL4ZGB2YV';
var org1 = '8231868522';
var org2 = '1504496266';

getEvents([org1,org2], token).then(function(res) {

Of course, I don't have any error handling in there, but if you don't tell anyone, I won't. What's nice is you could take this code and easily use it with something like FullCalendar to create a nice, large calendar on your site.

Ok, so I was going ot go ahead and post the blog, but then I figured, why not go ahead and build a FullCalendar demo. All I had to do was modify the array of events to match what FullCalendar wanted:

var token = 'NG6HEAKRAAXCL4ZGB2YV';
var org1 = '8231868522';
var org2 = '1504496266';

var $events = $("#events");


getEvents([org1,org2], token).then(function(res) {
	console.log("Result");
	//convert res to something FC can use
	for(var i=0;i<res.length;i++) {
		res[i].title = res[i].name.text;
		res[i].startOrig = res[i].start;
		res[i].start = res[i].startOrig.utc;
		res[i].endOrig = res[i].end;
		res[i].end = res[i].endOrig.utc;
	}
	console.dir(res);
	
	if(res.length) {

		$events.fullCalendar({
			header: {
				left: 'prev,next today',
				center: 'title',
				right: 'month,agendaWeek,agendaDay'
			},
			timezone:'local',
			events:res
		});
		
	} else {
	}			
});

You can run that demo here: https://static.raymondcamden.com/demos/2015/jul/22/test7.html.

Enjoy!

Raymond Camden's Picture

About Raymond Camden

Raymond is a developer advocate for HERE Technologies. He focuses on JavaScript, serverless and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by disqus_qooHuDF6jD posted on 7/23/2015 at 10:54 AM

Well done, Raymond! Glad I was able to help on this a little bit, and thanks for sharing for the community. :)

Comment 2 by Roman posted on 1/5/2016 at 3:31 PM

Thank you for your help! Very nice und clear description!

Comment 3 by Andrei posted on 3/25/2016 at 9:39 PM

Raymond can you please help me with this question:
http://stackoverflow.com/qu...
I appreciate it!

Comment 4 (In reply to #3) by Raymond Camden posted on 3/27/2016 at 12:55 PM

I have not used that part of the API, so I can't help you there.

Comment 5 by geenajunior posted on 4/12/2016 at 8:45 PM

How can I truncate the event description text and use a read more?

Comment 6 (In reply to #5) by Raymond Camden posted on 4/13/2016 at 11:23 AM

In JavaScript, you can use the length property to check the length of a string variable. You could use that to truncate using the mid function.

Comment 7 by Jonathan posted on 6/15/2016 at 8:29 AM

Is it possible to do pagination? or get more as you scroll down the page?

Comment 8 (In reply to #7) by Raymond Camden posted on 6/15/2016 at 12:30 PM

Did you check the API docs?

Comment 9 (In reply to #8) by Jonathan posted on 6/15/2016 at 12:32 PM

Yes- it wasnt there - paging was but not the size

Comment 10 (In reply to #9) by Raymond Camden posted on 6/15/2016 at 12:36 PM

Then you may need to ping them and report a doc issue - as obviously they need to let folks know what the size of a page is. :)

But if the API supports it, then sure, my code could be updated to use it too.

Comment 11 (In reply to #10) by Jonathan posted on 6/15/2016 at 1:35 PM

I have sent them a "Tweet" - Ill let you know what they say - if they come back to me :)

Comment 12 (In reply to #10) by Jonathan posted on 6/17/2016 at 7:13 AM

I have had a reply - No - the Size is Fixed at 50 and cannot be changed. They don't seem to be very helpful and didn't reply back when I asked if they would consider amending their code to allow a Size parameter :).

Comment 13 (In reply to #12) by Raymond Camden posted on 6/17/2016 at 2:03 PM

Ugh... well... thanks for letting us know what happened.

Comment 14 by Walt Whitaker posted on 8/8/2016 at 9:27 PM

API DOC: https://www.eventbrite.com/...
SAMPLE REQUEST:
$.ajax({
method: "GET",
url: "https://www.eventbriteapi.c..." + token + "&q=fitness&location.address=San Diego&page=3",
}).done(function(res) {
console.log(res);
}); <-- Works beautifully. The number of events returned is fixed to +-50 objects per page. Your best bet is to handle these objects in JS or PHP manually.

Comment 15 (In reply to #14) by Raymond Camden posted on 8/8/2016 at 10:04 PM

So... are you commenting on my code? Suggesting an alternative? What? :)

Comment 16 (In reply to #15) by Walt Whitaker posted on 8/8/2016 at 10:20 PM

I apologize! haha I intended to send this code to Jonathan, for his frustrations with Eventbrite's pagination

Comment 17 (In reply to #16) by Raymond Camden posted on 8/8/2016 at 10:31 PM

No worries. :)

Comment 18 by Nick posted on 9/19/2016 at 1:01 PM

Has anyone made anything so to pull through all "your area" events to show on website.

As in not just your own but ALL events say Business sector events and your localization area.. (im totally new to coding so sorry if this is a daft question).. All I ever find is your own events and people making the assumption thats all you would want to show and wouldn't consider advertising all events available..

Where as my website needs to show all business events that eventbrite has to offer .. well in our localized area/s

Comment 19 (In reply to #18) by Raymond Camden posted on 9/19/2016 at 6:09 PM

It's been a while since I looked at the API, but I just did a quick look and it seems to support finding matches around a location, so it should be possible.

Comment 20 by Ricardo Sandí posted on 7/19/2017 at 2:13 PM

Thanks so much!!!

Comment 21 (In reply to #20) by Raymond Camden posted on 7/19/2017 at 2:32 PM

Thank you for the donation!

Comment 22 (In reply to #21) by Nitish kumar Sharma posted on 7/20/2017 at 6:05 AM

Hello Raymond, Can you please Explain how to play our website videos in our ionic1 app but all videos play on offline mode ?

Thanks in Advance.

Comment 23 (In reply to #22) by Raymond Camden posted on 7/20/2017 at 10:11 AM

This question has nothing to do (as far as I can see), with the topic in hand. For general questions, please post either to the Ionic forums, or Stack Overflow.

Comment 24 by Jeff Chiu posted on 11/29/2017 at 6:40 AM

great example, but wondering if there's a way to use promise to fetch the eventbrite API

Comment 25 (In reply to #24) by Raymond Camden posted on 11/29/2017 at 9:24 AM

I'm confused - isn't that what my code is using?

Comment 26 by Elie posted on 7/2/2018 at 9:33 AM

Great example Raymond. Any Idea how to get the tickets (Price) for each event. I suffered figuring this out. The only relevant endpoint seems Tickets Group but no. Can you help? Thanks.

Comment 27 (In reply to #26) by Raymond Camden posted on 7/2/2018 at 12:36 PM

I'm sorry but I haven't looked at the EventBrite API in years. Best I can suggest is their support forum, if they have any. :\

Comment 28 by Ulises Capistrán posted on 1/21/2020 at 9:11 PM

well at this time search feature is deprecated its so badd :(

Comment 29 (In reply to #28) by Raymond Camden posted on 1/21/2020 at 9:37 PM

Sorry to hear that.