Building your Proxy Pass-Through URL

Like some of you, I started working on Iteration 3 which involves adding another API to our group website. I thought I would start off with the “easy” stuff and go from there. I had three goals:

1) Figure out how to iterate through the DOM to get multiple events.
2) Figure out how to display the events.
3) See if there is a way to build a URL with a variable that I can change based on a City.

Well, I started with the first problem and found that using my proxy pass-through I got all the information I needed. The DOM contained everything and if I indexed each element I could see multiple event information. I spent quite a bit of time trying to get that information with a for loop and that part may even work. However, I found when I went to the second part and tried to display the information using the innerHTML property it only displayed the last event. I spent quite a bit of time trying separate DIVs with hard coded indexes just to see if it would work. I never got that to work. After emailing one of my group members (James) suggested another soulution which I have not looked at yet. (Mainly because I am a little frustrated with that) Anyway, I decided to move on the difficult goal (number 3). I was surprised that I got that to work in a short time because that seemed to be the most difficult part of everything I was trying to do.

So, if you want to pass a variable into your php proxy pass-through (build the URL) here is how you can do it:

The first thing I did was to adjust my "active.php" file by hacking off the end of the original URL and making it a varible. It was the key text which I have to supply to use the API. Also, note that the part I want to change is just before the key: dma="the city I want to change" then the key follows with an &api_key=... So, the only thing I changed initially was to hack off the key and make it a varible $key = '&api_key=xxxxxxxxxxxxxx' Then you will notice I just apppended it to the original string which was HOSTNAME + path + key which actually was done with the "." php append charater. Which you can see in my example. Once I knew that worked all I had to do was figure out how to supply the "path" as an input varible. This was much simpler than I thought. I spent a lot of time looking on the Internet but ended up just experimenting and figuring it out.

This is my original php:

define ('HOSTNAME', 'http://api.amp.active.com/assets/cycling?dma=Detroit&api_key=xxxxxxxxxxxxxxxxxxxxxx');

$path = ($_POST['path']) ? $_POST['path'] : $_GET['path'];

$url = HOSTNAME.$path;

This has the HOSTNAME, path and my new "key" varible

define ('HOSTNAME', 'http://api.amp.active.com/assets/cycling?dma=');
$path = ($_POST['path']) ? $_POST['path'] : $_GET['path'];

$key = '&api_key=xxxxxxxxxxxxxxxxxxxxx';

This is where everything gets "appended" to make the URL

$url = HOSTNAME.$path.$key;

Once I realized that I didn't have to do any more with the php script I started playing with the js to see what I needed to do to get the 'path' varible to be the city I wanted to get information about. This is what I ended up doing in my js file.

As you can see I created a varible "event_City" and assigned Detroit to it. Then I add that varible to the url which gets passed in as 'path' and ultimately gets appended to the HOSTNAME and then the key gets appended to that to complete the string. This is what I get when I get events for Detroit:




Now that I have this out of the way all I need to do is figure out the first two "easy" parts and I will be good.