Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8

Thread: JSON problem

  1. #1
    New Coder
    Join Date
    Jul 2012
    Posts
    10
    Thanks
    3
    Thanked 1 Time in 1 Post

    JSON problem

    Hi all,

    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>
    Outfit_Stats.php
    Code:
    <?php
    header("Content-Type: application/json");
    $json_url = "http://census.soe.com/get/ps2-beta/outfit/?name=Immortal%20Serial%20Killers";
    $jsonData = file_get_contents($json_url);
    echo $jsonData;
    ?>\
    Data
    Code:
    {
      "outfit_list": [
        {
          "id": "37509488620602819",
          "alias": "ISK",
          "name": "Immortal Serial Killers",
          "time_created": "1.353438835E9",
          "leader_character_id": "5428010618030994401"
        }
      ],
      "internal": false,
      "milliseconds": 6,
      "returned": 1
    }
    The JSON url i have used above was just a minimal data pull to see if it worked.

    THIS LINK of data is what i want to eventually display.

    Any help would be much appreciated

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,296
    Thanks
    10
    Thanked 584 Times in 565 Posts
    you don't need php, that's a waste of time.

    you simply need to add a callback param to the url, ex: "&callback=console.log"


    Code:
    <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=console.log"></script>
    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.
    Last edited by rnd me; 03-04-2013 at 06:00 PM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #3
    New Coder
    Join Date
    Jul 2012
    Posts
    10
    Thanks
    3
    Thanked 1 Time in 1 Post
    tanks for your reply,

    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.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript" src="/scripts/jquery-1.9.1.min.js" ></script>
    <script type="text/javascript" src="/scripts/handlebars.js" ></script>
    <script type="text/javascript" src="/scripts/mustache.js" ></script>
    
    
    <script src="https://census.soe.com/get/ps2-beta/outfit/?name=Immortal%20Serial%20Killers&callback=console.log"> 
        $.getJSON('callback=console.log', function(data) {
        var template = $('#personTpl').html();
        var html = Mustache.to_html(template, data);
        $('#sampleArea').html(html);
    });
    </script>
    </head>
    <body>
    <script id="personTpl" type="text/template">
    <h1> {{id}} <br>  
    {{name}} <br>
    {{alias}} <br>
    {{time_created}} <br>
    {{leader_character_id}} </h1>
    </script>
    </body>
    </html>
    I'm probably going to use Google's chart API, that way i can display the data into tables and charts easily once i can establish the connection.
    Last edited by wingsgb; 03-06-2013 at 01:50 PM.

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,092
    Thanks
    23
    Thanked 594 Times in 593 Posts
    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 />";

    echo 
    str_replace('"'''$sock[0])." : ".$sock[1]."<br />";
    echo 
    str_replace('"'''$sock1[0])." : ".$sock1[1]."<br />";
    echo 
    str_replace('"'''$sock2[0])." : ".str_replace('}'''$sock2[1])."<br />";
    ?>

  • Users who have thanked sunfighter for this post:

    wingsgb (03-07-2013)

  • #5
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,917
    Thanks
    56
    Thanked 545 Times in 542 Posts
    I like rnd me's method better - seems simpler...

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    </head>
    <body>
    <div id="info"></div>
    
    <script type="text/javascript">
    
    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+="alias: "+outfits[i].alias+"<br>"
    +"id: "+outfits[i].id+"<br>"
    +"leader id: "+outfits[i].leader_character_id+"<br><br>"
    +"Members:<br><br>"
    for (var a = 0; a < outfits[i].members.length; a++) {
    var memb=outfits[i].members[a];
    try {
    document.getElementById("info").innerHTML+="Name: "+memb.name.first+"<br>"			
    +"Rank: "+memb.rank+"<br>"
    +"Current Points: "+memb.certs.currentpoints+"<br>"	
    +"Points to next: "+memb.certs.percentagetonext+"<br><br>"	
    } catch (error){
    document.getElementById("info").innerHTML+="<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>

  • Users who have thanked xelawho for this post:

    wingsgb (03-07-2013)

  • #6
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,296
    Thanks
    10
    Thanked 584 Times in 565 Posts
    Code:
    
    <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript" src="/scripts/jquery-1.9.1.min.js" ></script>
    <script type="text/javascript" src="/scripts/handlebars.js" ></script>
    <script type="text/javascript" src="/scripts/mustache.js" ></script>
    
    
    <script>
       function incoming(data) {
        var template = $('#personTpl').html();
        var html = Mustache.to_html(template, data);
        $('#sampleArea').html(html);
    });
    </script>
    </head>
    <body>
    
    <script id="personTpl" type="text/template">
    <h1> {{id}} <br>  
    {{name}} <br>
    {{alias}} <br>
    {{time_created}} <br>
    {{leader_character_id}} </h1>
    </script>
    
    <script src="https://census.soe.com/get/ps2-beta/outfit/?name=Immortal%20Serial%20Killers&callback=incoming"></script>
    
    </body>
    </html>
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #7
    New Coder
    Join Date
    Jul 2012
    Posts
    10
    Thanks
    3
    Thanked 1 Time in 1 Post
    @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>
    Thanks again for all the input
    Last edited by wingsgb; 03-07-2013 at 01:10 AM.

  • #8
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,917
    Thanks
    56
    Thanked 545 Times in 542 Posts
    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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •