Use JQuery to get data from JSON file

Question

Overflow!

I'm currently working on a little application I have to finish for school monday. I didn't have a lot of time to make something big. So I decided, why not retrieve information of Steam's Web Api and get the stats of players.

The url to the steam api: http://api.steampowered.com/ISteamUserStats/GetUserStatsForGame/v0002/?appid=730&key=DA697BB2D106697D5F8AC7E7A2BFAC52&steamid=76561198263871727

The last parameter &steamid= represents the id of the player. Now I have found out how to get the steamid into a variable, but when trying to add the id to the rest of the url (http://api.steampowered.com/ISteamUserStats/GetUserStatsForGame/v0002/?appid=730&key=DA697BB2D106697D5F8AC7E7A2BFAC52&steamid=id should be here and fetching the data with the Ajax.getJson method.. It just doesn't work.. I'm for very experienced with JSON btw.. Can someone help me out with this?

My Web Page:

<!DOCTYPE html>
<html lang="en">
    <head>
        <!--Meta Information-->
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!--JQuery Mobile-->
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
        <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

        <!--FontAwesome-->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

        <!--Custom Styles-->
        <link href="css/style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div data-role="page" id="index">
            <div data-role="header">
                <h1>CS:GO Stats</h1>    
            </div>
            <div data-role="main" class="ui-content">
                <div class="search">
                    <label for="search">Enter SteamID:</label>
                    <input type="search" name="search" id="inputSearch" />
                    <input type="submit" id="butSearch" data-inline="true" value="Search SteamID">
                </div>
                <div id="result">

                </div>
            </div>    
        </div>
        <!--getSteamUserId function-->
        <script src="js/getSteamUserId.js"></script>
    </body>
</html>

My Javascript Code:

$(document).ready(function() {

    $('#butSearch').click(function(event) {
        var input = $('#inputSearch').val();

        $.getJSON( "http://api.steampowered.com/ISteamUserStats/GetUserStatsForGame/v0002/?appid=730&key=DA697BB2D106697D5F8AC7E7A2BFAC52&steamid=" + input, function( data ) {
            var items = [];
            $.each( data, function( key, val ) {
                items.push( "<li id='" + key + "'>" + val + "</li>" );
            });

            $( "<ul/>", {
                "class": "my-new-list",
                html: items.join( "" )
            }).appendTo( "#result" );
        });
    })

})

Now what I want is to get the stats data from the JSON file into my web page. Would anyone know how to do this? I can also see the JSON is not only a flat JSON file.. Like it has different layers (if that's a good explenation)..

Thanks in advance!

@charlietfl It's defined here: `$('#butSearch').click(function(event) { var input = $('#inputSearch').val();` — peer, Jan 16 '16 at 13:38
my bad...totally missed that. So what is currently happening? Have you inspected the actual request in browser dev tools network? Any CORS warnings in console? — charlietfl, Jan 16 '16 at 13:40
do you have any errors? Unfortunately I don't know how to tell jsfiddle to load http (not secure) content :/ https://jsfiddle.net/63yowb62/ — Wikunia, Jan 16 '16 at 13:41
google that CORS warning error for better understanding of what it means. Can try accessing api using `jsonp` if api supports it, otherwise will need to use a proxy on your server — charlietfl, Jan 16 '16 at 13:46

score 1 · Accepted Answer · answered Jan 16 '16 at 14:03

1

Work with jsonP like here:

$.ajax({
  url: url,
  dataType: 'JSONP',
  type: 'GET',
  jsonp: 'jsonp',
  success: handler

});

Working example here

answered Jan 16 '16 at 14:03

puemos

1,109
9
12

score 1 · Answer 2 · edited May 23 '17 at 11:52

I'm not entirely sure about the first part. It gives me an error which after googling led me to "No 'Access-Control-Allow-Origin' header is present on the requested resource" which advises using CORS. Error:

XMLHttpRequest cannot load http://api.steampowered.com/ISteamUserStats/GetUserStatsForGame/v0002/?appid=730&key=DA697BB2D106697D5F8AC7E7A2BFAC52&steamid=&76561198263871727. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 400.

Once you have the JSON it's easier. If it's stringified you can turn it into a javascript object with

steamObject = JSON.parse(steamJsonData);

and then navigate through it like a normal javascript object. Cycle through playerstats.stats[i] with a for loop and you can add the data to your page using normal DOM manipulation.

`$.getJSON` already parses the data to javascript object. You will throw errors using JSON.parse. Also you can't implement CORS on a server you don't control — charlietfl, Jan 16 '16 at 14:13
I wasn't sure if $getJSON returned a string version of the JSON data or not, I get mixed up between that and others. You're right about CORS and not his server, Shy A seems to have gotten a work around that with jsonP though. — David, Jan 16 '16 at 14:28

Use JQuery to get data from JSON file

2 Answers2