I have an understanding of HTML/CSS and a limited knowledge of PHP. I'm a member of a small gaming outfit were last year I designed and coded a new theme related website to gain abit of experience/ practice and gave the outfit something better than a forum.
Recently the developers of the PC game we play have just opened up beta testing to there API of ingame stats via JSON.
I would like to learn how to display this data in some form of a table.
Before I took to the forums asking all sorts of questions, I spent the weekend reading through whatever tutorials I could find. From them iv found the below code to see if I could do a basic call but its not loading any of the JSON data on my HTML page.
Code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function ajax_get_json(){
var hr = new XMLHttpRequest();
hr.open("GET", "Outfit_Stats.php", true);
hr.setRequestHeader("Content-type", "application/json");
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
var data = JSON.parse(hr.responseText);
var results = document.getElementById("results");
results.innerHTML = "";
for(var obj in data){
results.innerHTML += data[obj].name+ data[obj].alias+ data[obj].id+ data[obj].time_created+" <hr />";
}
}
}
hr.send(null);
results.innerHTML = "requesting...";
}
</script>
</head>
<body>
<div id="results"></div>
<script type="text/javascript">ajax_get_json();</script>
</body>
</html>
what you do with the argument to your callback (aka the data object) is up to you.
let us know if you need help iterating and displaying the data.
i would use a template like mustache or handlebars to turn the data into html.
__________________ my site (updated 5/13) STATS (2013/5) HTML5:90.2% MOB:14% IE7:0.5% IE8:8.6% IE9:9.8% IE10:10%
i still cant communicate with the JSON url data, all the guides i find is of when the JSON is stored locally in a file or the "var data" i also cant find any guides on how to communicate with with the code you gave me.
Iv never heard or used mustache/ handlebars before, so iv just had a read through there sites and come up with the below but didn't know what to do with the code you give me.
I know this is convoluted and not pretty, but it does work. I have used two methods to extract info from json object. This is php, it can be used with html code.
PHP Code:
<?php // TOP PORTION CAN BE SET BEFORE THE DOCTYPE $json_url = "http://census.soe.com/get/ps2-beta/outfit/?name=Immortal%20Serial%20Killers"; $jsonData = file_get_contents($json_url); echo $jsonData."<br /><br /><br />"; // TO SEE WHAT IS RETURNED = DELETE THIS LINE!!! $data = json_decode($jsonData,true); $color = ''; $camy = ''; foreach($data["outfit_list"][0] as $key=>$item){ $camy .= $key . "~"; $color .= $item . "~"; }
$datem = explode("~", $camy); $data = explode("~", $color); $other = explode(",", $jsonData); // YOU COULD HAVE DONE EVEYTHING THIS WAY $sock = explode(":", $other[5]); $sock1 = explode(":", $other[6]); $sock2 = explode(":", $other[7]);
//THIS PORTION CAN BE PLACED IN HTML TO WRITE INFO WHERE YOU WANT IT echo $datem[0]." : ".$data[0]."<br />"; echo $datem[1]." : ".$data[1]."<br />"; echo $datem[2]." : ".$data[2]."<br />"; echo $datem[3]." : ".$data[3]."<br />"; echo $datem[4]." : ".$data[4]."<br />";
@SunFighter, thanks for providing me with this php script. It worked when i tested the code although i am going to try stick with the other method as it should be easier when adding the data into a table or graph.
@Rnd_Me, It dosen't seem to do anything when i uploaded the file to test, click link
@xelawho, That piece of code has worked the best so far although i would like to understand it abit more.
What do the below lines mean, mainly ".lenght"
Code:
var outfits=o.outfit_list
for (var i = 0; i < outfits.length; i++)
for (var a = 0; a < outfits[i].members.length; a++) {
var memb=outfits[i].members[a];
What dose the "info" refer too.
Code:
document.getElementById("info")
Lastly to organise how its displayed abit better do i just put "" around any html tags, like below.
Code:
function showIt(o) {
console.log(o) // have a look in Chrome's console to inspect the object reurned
var outfits=o.outfit_list
for (var i = 0; i < outfits.length; i++) {
document.getElementById("info").innerHTML
"<table class="statsTable">"
"<tr>"
"<td>"+="alias: " "</td>" "<td>"+outfits[i].alias+"</td>"
"<td>"+"id: " "</td>" "<td>" +outfits[i].id+"</td>"
</tr>
</table>
I used length because the object returns arrays, so that for loop is the way you can iterate through all the arrays members and access their indiviual information.
"info" is the id of the div where the results get rendered, same as "results" in your original code
your example will never work for a variety of reasons, and creating a table with innerHTML is almost impossible because of stupid IE. But if that's all you want to do, why not do something like this:
Code:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div id="info"></div>
<script type="text/javascript">
function showIt(o) {
var outfits=o.outfit_list
for (var i = 0; i < outfits.length; i++) {
document.getElementById("info").innerHTML+="<span>alias: "+outfits[i].alias+"</span> "
+"<span>id: " +outfits[i].id+"</span><br>";
}
}
</script>
<script src="https://census.soe.com/get/ps2-beta/outfit/?name=Immortal%20Serial%20Killers&c:resolve=member_character(name,type.faction,times,stats.facility_capture_count,stats.facility_defended_count,stats.kill_death_ratio,certs,experience,stats.kills.faction)&callback=showIt"></script>
</body>
</html>
Before you post, read our: 
