SC2SEA.com - Starcraft 2 SEA eSports Community Site

ChaynesOre · Tue, 13th-Mar-2012, 2:07 PM

Hey guys, I've got what I assume is a very simple task but I can't work it out using Google search because I have no knowledge of the basics I assume. I've got a limited understanding of programming (as a mechanical engineer) and how it works etc, but next to no knowledge of javascript and web programming.

THE GOAL:

I want to create a simple web page for my clan (FaDe) that has a list of all members, with contact information, real id emails, etc, and also have it link to data extracted from Sc2Ranks (namely, League, Rank, Win/Loss, Race, etc). It's basically a customizable list of our team members, that talks to Sc2Ranks. I think this should be pretty simple, but I am clueless.

WHAT I'VE WORKED OUT:

I've worked out that I need to use the API from Sc2Ranks to achieve this ( http://sc2ranks.com/api ). Reading this, I've worked out how to correctly construct the API URL. For example, my account for "Character with Base Team Info" would be as follows, for the three available outputs:

http://sc2ranks.com/api/char/teams/s...appKey=zxq.com (XML)
http://sc2ranks.com/api/char/teams/s...appKey=zxq.com (JSON)
http://sc2ranks.com/api/char/teams/s...appKey=zxq.com (JSONP)

THE PROBLEM:

I have no idea what to do next. I can't seem to find anything on Google that simply tells me how to tell my web page to talk to these API URLs and manipulate the data so that I can put it in a table as I need to. I'm sure this is an extremely simple task, but I've spent hours looking and am just completely stuck. I understand that jQuery.getJSON is supposed to be useful, but I still can't work it out. Please can anyone help?! :S

Quick Comments

RicocheT:

Thanks for your hard work babe <3

**|Erasmus|** · Tue, 13th-Mar-2012, 2:39 PM

There is a decent ajax tutorial here: http://www.w3schools.com/ajax/ajax_x...quest_send.asp

Code:

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

xmlhttp.open("GET","http://sc2ranks.com/api/char/teams/sea/FaDeChaynes!401514/1/0.json?appKey=zxq.com", true);
xmlhttp.send();

If you use that kind of javascript with the url that returns JSON formatted data (the tutorial explains how to use the readystatechange stuff with this) you can just use the built in eval() function in javascript to get the json info as a javascript object.

This is a bit of stuff if it was to happen whenever the page is loaded. I think you're better off storing your own data in a file on the server with the webpage, and give each player in your table an 'update now' button which runs a query past sc2ranks to grab the latest profile info. (or an 'update all' button if it's too much to update everyone.

I hope that helps. paperclip or veteris can probably explain web stuff better than I can, but you're welcome to ask me questions if you need and I'll try to help.

Quick Comments

	RicocheT:
	ChaynesOre:	extremely appreciated!!
	nirvAnA:

**xpaperclip** · Tue, 13th-Mar-2012, 4:29 PM

jQuery is your friend for anything client-side.

The code in the spoiler fetches the clan FaDe custom division and inserts each player as a row into a table. Because you are loading data cross-site, you have to use a JSONP callback because most modern browsers will refuse to do an AJAX fetch cross-domain. Otherwise, the code is very simple, so you should be able to follow it. (As an aside, tablesorter is something I didn't include but that you might find useful.)

+ Show +

However! This is definitely not the way to proceed. As Erasmus said, something like this should really be done on the server-side with a database. The sc2ranks API terms even specifically says to cache the results and not fetch everything every time the page is loaded. Depending on your host, this may or may not be viable. Let us know how your site is hosted if you want any additional help.

Quick Comments

	RicocheT:
	ChaynesOre:	miracle worker indeed!! :D
	nirvAnA:

ChaynesOre · Tue, 13th-Mar-2012, 5:12 PM

!!!!!! OMG! Wow thank-you so much guys. It works and is talking to it correctly. That is amazingly cool. I'll spend some time looking at it and understanding it. I'm one of those people that understands by way of example so having this directly applicable code to follow is going to be perfect.

The page is going to be hosted anywhere that's free. I found this place yesterday http://www.zymic.com/ and it's already setup with an FTP server etc, so I think I should be able to cache the data as you say. I'll look into this now. I think I've stumbled across some tutorial pages that touched on this already so hopefully I'll be able to take it from here.

Thank you so much again for taking the time to help. Sc2 people are so nice