Using the Pinball Map API to list machines on your website

Here’s a simple example of using the Pinball Map API to do something cool. In this post I’ll give a detailed how-to (with PHP and jQuery examples) so that you can implement this feature on your site.

Background: http://pinballmap.com aims to actively promote pinball. If you own a business that carries publicly-playable pinball machines, then our site is free advertising for you.

Say you want to share on your own website that you have pinball machines. And you want to list the machines you currently have, AND you want that list to stay current without you having to update your website.

Well, that’s easy. You can pull that information from http://pinballmap.com using the Pinball Map API.

Here’s an example of it in action.

Scott created an API endpoint specifically for listing a location’s machines (note: this is Ryan typing, and I’m not an expert on any of this stuff). Here’s what the raw json file looks like for a location: http://pinballmap.com/api/v1/locations/6784/machine_details.json

Note the “6784” in the url. That is the location ID. To see the machine data for your site, you’ll have to replace 6784 in the url with your location’s ID. So now you should be asking, what is the location ID for my location?

That’s easy to find:

First go to the regional map that your location is in. For this particular location, AYCE Gogi, that’s the Los Angeles Pinball Map

Then search for your location. When it comes up, click the link that says “Link to this map result.”

That link has your location ID. In this case it’s http://www.pinballmap.com/la/?by_location_id=6784

6784! So, just plug that number (or rather, your number) into the json link above and you’ll see your machine data.

Parsing the json data, and putting in on your website

It might hurt your brain to stare at that json data. The important thing to know is that there’s an object called ‘machines’ and within it is an array of hashes. These are the keys in each hash: “name” “year” “manufacturer” “ipdb_link”. And each key has a value.

To spit out the data, you iterate through the hashes, pulling out the values you want along the way. There’s the name, and if you click the name it goes to the ipdb_link, and then in parentheses there’s the manufacturer and year.

Here’s a PHP method for spitting this out

In WordPress, you can create a page template and then place this code in it. Place this code near “the_content” (your mileage may vary).

So here’s the php code, with my comments explaining what everything does. At the bottom of this post is a link to the complete code, so you can copy it.

First grab the json file and decode it.

<?php
$url = "http://pinballmap.com/api/v1/locations/6784/machine_details.json";
$json = file_get_contents($url);
$data = json_decode($json, TRUE);

Then add a FOR loop that counts through the hashes.

for($i=0; $i<count($data['machines']); $i++) {

Then I created variables, so that the final part is easier to read

$link = $data['machines'][$i]["ipdb_link"];
$name = $data['machines'][$i]["name"];
$manufacturer = $data['machines'][$i]["manufacturer"];
$year = $data['machines'][$i]["year"];

And here’s the output

echo "<h4><a href=" . $link . ">" . $name
. "</a> (" . $manufacturer . ($manufacturer? ", " : "")
. $year . ")</h4>";
}
?>

If you want to only spit out the names of the machines, then “echo $name;” would do it.

(If you’re wondering about the conditional statement ($manufacturer? etc) - that’s there because some machine hashes do not contain values for the manufacturer field. So that conditional is saying “if there’s no manufacturer value, then don’t print that comma.)

jQuery Method

(In WordPress, you usually have to use “jQuery” rather than “$”.)

First add this div to the template, placing it near “the_content” (your mileage may vary).

<div class="machine_list"></div>

The results will print in that div. The code below should be within a script tag.

jQuery(document).ready(function() {

get the json file

jQuery.getJSON("http://pinballmap.com/api/v1/locations/6784/machine_details.json", function(data) {

create a loop

jQuery.each(data.machines, function(i, obj) {

Variables!

var machineName = data.machines[i].name;
var link = data.machines[i].ipdb_link;
var year = data.machines[i].year;
var manufacturer = data.machines[i].manufacturer;
var list = jQuery(".machine_list");

spit out the result!

jQuery("<h4 />", { html: "<a href=" + link + ">" + machineName
 + "</a> (" + manufacturer + (manufacturer? ", ": "")
+ year + ")"}).appendTo(list);
});
});
});

Here’s the raw code for both methods

Even if you don’t have a WordPress site, these methods will work. You just need a website that supports either PHP or jQuery.

So, now we never have to update that your webpage again! As long as the map is up to date, the website is up to date.

In conclusion, this is a simple way to post your machine list on your website. Tell me if you have any questions, and tell us if you use it on your website!