Simple Realm Status with jQuery & JSONP

1 Tauren Druid
0
This is a pretty basic example. I just wanted to show an easy way to display the data with very little programming knowledge required for anyone looking to add this functionality to their site. This isn't meant to be an out-of-the-box solution but should give you a good idea on how you can access and work with the data.

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
</head>
<body>
<div id="realms"></div>
<script type="text/javascript">
$.getJSON("http://us.battle.net/api/wow/realm/status?jsonp=?", function (data) {
$.each(data.realms, function (i,item) {
var $StatusString = "<div class=\"realm\"><p>Realm: " + item.name + "</p><p>Type: " + item.type + "</p><p>Status: " + item.status + "</p><p>Population: " + item.population + "</p><p>Queue: " + item.queue + "</p></div>";
if((i + 1) < data.realms.length){$StatusString += "<hr />"}
$($StatusString).appendTo("#realms");
});
});
</script>
</body>
</html>


This example shows all realms but you can add the realm=Your+Realm parameter to the first argument of getJSON to show only your realm.

$.getJSON("http://us.battle.net/api/wow/realm/status?realm=Your+Realm+Name&jsonp=?",


<head>
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
</head>

The first important part you'll notice is we include jQuery in the <head> of the document. Code in our <script> tags will execute when the page is loaded since they are in the <body> and we didn't give them any conditionals so it is important we have jQuery already loaded, which is why it's in the <head>.

The script:

$.getJSON("http://us.battle.net/api/wow/realm/status?jsonp=?", function (data) {
This will use jQuery's .getJSON function to pull the data from blizzard and put all of it into a variable aptly named data.

$.each(data.realms, function (i,item) {
This iterates through each realm. the parent array is named 'realms' which is why we use data.realms and then we put data for the current realm in item (i holds the # of the current realm in the array).

var $StatusString = "<div class=\"realm\"><p>Realm: " + item.name + "</p><p>Type: " + item.type + "</p><p>Status: " + item.status + "</p><p>Population: " + item.population + "</p><p>Queue: " + item.queue + "</p></div>";

This formats our data in HTML, admittedly it's not very pretty. remember we put the individual realm data in our item variable so we use item.<blizzvarname> to invoke each piece of data. We are putting the formatted data into a string named $StatusString

if((i + 1) < data.realms.length){$StatusString += "<hr />"}
This line just adds a horizontal line after each set of realm data, as long as it isn't the last realm

$($StatusString).appendTo("#realms");

This line adds our current realm data from $StatusString to the <div id="realms"> container.
Edited by Brawrz on 4/23/2011 7:58 PM PDT
Reply Quote
85 Human Death Knight
2220
From: http://elitistjerks.com/f15/t14035-how_get_xml_php_armory/p5/#post1912135

Can someone with access to the US forums ask what we can expect for the future? If they plan to allow X-Site-Ajax requests to fetch data from the API, i ditch my current PHP scripts and write this stuff from scratch in JavaScript.
Reply Quote
85 Tauren Druid
4135
04/15/2011 03:39 PMPosted by Cleanselol
If they plan to allow X-Site-Ajax requests to fetch data from the API


As I replied in the post at EJ, that is exactly what JSONP is designed to do. I'm excited it's part of the new API toolkit!
Reply Quote
85 Night Elf Druid
7960
Could this method be used to pull the guild roster? If so could you help a new learner out and post an example? Thanks
Reply Quote
90 Gnome Warlock
14400
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
</head>
<body>
<div id="realms"></div>
<script type="text/javascript">
$.getJSON("http://us.battle.net/api/wow/realm/status?realm=Baelgun&jsonp=?", function (data) {
$.each(data.realms, function (i,item) {
var $StatusString = "<div class=\"realm\"><p>Realm: " + item.name + "</p><p>Type: " + item.type + "</p><p>Status: " + item.status + "</p><p>Population: " + item.population + "</p><p>Queue: " + item.queue + "</p></div>";
if((i + 1) < data.realms.length){$StatusString += "<hr />"}
$($StatusString).appendTo("#realms");
});
});
</script>
</body>
</html>

how can i get:
"Status: false" or "Status: true" that will be displayed to say "Online" / "Offline"?

and if its possible if it returns status online, to play a mp3 file from desired URL.
Edited by Zilak on 6/19/2012 10:34 AM PDT
Reply Quote
85 Night Elf Druid
0
You could just test the item and assign a value to a variable and print the variable as the output value. IE:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
</head>
<body>
<div id="realms"></div>
<script type="text/javascript">
$.getJSON("http://us.battle.net/api/wow/realm/status?realm=Baelgun&jsonp=?", function (data) {
$.each(data.realms, function (i,item) {
var Rstatus;
if(item.status=='true') {
Rstatus = 'Online';
} else {
Rstatus = 'Offline';
}


var $StatusString = "<div class=\"realm\"><p>Realm: " + item.name + "</p><p>Type: " + item.type + "</p><p>Status: " + Rstatus + "</p><p>Population: " + item.population + "</p><p>Queue: " + item.queue + "</p></div>";
if((i + 1) < data.realms.length){$StatusString += "<hr />"}
$($StatusString).appendTo("#realms");
});
});
</script>
</body>
</html>
Edited by Kieble on 6/19/2012 12:14 PM PDT
Reply Quote
90 Gnome Warlock
14400
hmmm I saved your entire code as a UTF-8 .txt and renamed it to .html

it says offline now when i try it... (i know that my server is online)

and my old script shows it as true... hmmmm what could be wrong..

And thanks for helping :)
Edited by Zilak on 6/19/2012 1:21 PM PDT
Reply Quote
85 Night Elf Druid
0
Ah yes, just tested it. Didn't realize item.status was a boolen and not a string.


var Rstatus = item.status;
if(Rstatus) {
Rstatus = 'Online';
} else {
Rstatus = 'Offline';
}
Reply Quote
90 Dwarf Hunter
11930
Would anyone smarter than me mind sharing how you could retrieve the character profile api using a similar fashion as illustrated here? I'm wanting a simple widget in Blogger using JavaScript to show a specific toon's total achievement points as well as the recent achievement feed details.

The lookup code is changed from realms to:$.getJSON("http://us.battle.net/api/wow/character/REALM_NAME/TOON_NAME?fields=feed&jsonp=?"

But, what is the proper syntax to display character profile data from the resulting JSON?

{"lastModified":1343192492000,"name":"Peashooter","realm":"Borean Tundra","battlegroup":"Emberstorm","class":3,"race":22,"gender":0,"level":85,"achievementPoints":10170,"thumbnail":"borean-tundra/57/42897977-avatar.jpg","feed":[{"type":"ACHIEVEMENT","timestamp":1341805142000,"achievement":{"id":5442,"title":"Full Caravan","points":10,"description":"Recruit all 8 characters into Fiona's travelling party in Eastern Plaguelands.","rewardItems":[],"icon":"inv_misc_crop_02","criteria":[{"id":15624,"description":"Fiona"},{"id":15625,"description":"Gidwin Goldbraids"},{"id":15626,"description":"Tarenar Sunstrike"},{"id":15627,"description":"Argus Highbeacon"},{"id":15628,"description":"Pamela Redpath"},{"id":15629,"description":"Vex'tul"},{"id":15630,"description":"Rimblat Earthshatter"},{"id":17428,"description":"Beezil Linkspanner"}]},"featOfStrength":false}]}

I can't figure out how to reference the character values ( .name, . achievementPoints) and the feed array values (like .feed.achievement,title).

TIA!
Reply Quote
90 Dwarf Hunter
11930
Never mind... finally sunk into my brain.

Here's what I got:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
</head>
<body>
<div id="charProfile"></div>
<script type="text/javascript">
var url = "http://us.battle.net/api/wow/character/borean-tundra/peashooter?fields=feed&jsonp=?";

$.getJSON( url, function( data ) {

var strCharProf = "<div class=\"charProfile\"><p>Name: " + data.name + "</p><p>Level: " + data.level + "</p><p>Achievement Points: " + data.achievementPoints + "</p></div>";
$(strCharProf).appendTo("#charProfile");

$.each(data.feed,function(f,feed){
if (feed.type=='ACHIEVEMENT') {
// only collect the ones that are achvs
var strFeed = "<div class=\"charProfile\"><p>Type: " + feed.type + "</p><p>Title: " +
feed.achievement.title+ "</p><p>Points: " + feed.achievement.points + "</p><p>Description: " +
feed.achievement.description + "</p></div>";
$(strFeed).appendTo("#charProfile");
}
});
});
</script>
</body>
</html>


Now to make it pretty...
Reply Quote

Please report any Code of Conduct violations, including:

Threats of violence. We take these seriously and will alert the proper authorities.

Posts containing personal information about other players. This includes physical addresses, e-mail addresses, phone numbers, and inappropriate photos and/or videos.

Harassing or discriminatory language. This will not be tolerated.

Forums Code of Conduct

Report Post # written by

Reason
Explain (256 characters max)
Submit Cancel

Reported!

[Close]