How to use steam API json data in html with jquery?

Question

Im trying to get info from the steam web API.

This is the json that the api should output from this: http://api.steampowered.com/ISteamUser/GetPlayerSummaries/v0002/?key=YOUR_STEAM_API_KEY&steamids=76561198059308395

{
    "response": {
        "players": [
            {
                "steamid": "76561198059308395",
                "communityvisibilitystate": 3,
                "profilestate": 1,
                "personaname": "Shixma",
                "lastlogoff": 1439517830,
                "commentpermission": 2,
                "profileurl": "http://steamcommunity.com/id/Rev32gaming/",
                "avatar": "https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/b6/b6e18a8c0f6e61cf1a5ed2e8ec66f918116ecffc.jpg",
                "avatarmedium": "https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/b6/b6e18a8c0f6e61cf1a5ed2e8ec66f918116ecffc_medium.jpg",
                "avatarfull": "https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/b6/b6e18a8c0f6e61cf1a5ed2e8ec66f918116ecffc_full.jpg",
                "personastate": 1,
                "realname": "❤ Nao Tomori | Lucy Kaede ❤",
                "primaryclanid": "103582791434248624",
                "timecreated": 1330107496,
                "personastateflags": 0,
                "loccountrycode": "GB",
                "locstatecode": "N7"
            }
        ]

    }
}

This is the code I'm trying to use:

var steamSixFourId = '76561198059308395' //steam64 id
var steamApiKey = 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXX' //steam web api key
$(document).ready(function() {    
   $.getJSON("http://api.steampowered.com/ISteamUser/GetPlayerSummaries/v0002/?key="+steamApiKey+"&steamids="+steamSixFourId+"?",function(steamGetInfo) {
        $('#steamInfoWidget').html("Logo Link: " + steamGetInfo.response.players[0].avatarfull);
   });
});

It just doesnt do anything, here is the documentation for the API

Turns out it was a problem with the API itself. – Shixma Aug 14 '15 at 10:06 — Shixma, Aug 14 '15 at 10:06

score 1 · Answer 1 · answered Aug 14 '15 at 09:21

Don't have enough reputation to comment but can you explain what you want to do? According to your code, all you get is an image of the player. If you want to get them to login to the account maybe you should include an a-tag with the "profileurl" containing the image.

    var steamSixFourId = '76561198059308395' //steam64 id
        var steamApiKey = 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXX' //steam web api key
        $(document).ready(function() {    
           $.getJSON("http://api.steampowered.com/ISteamUser/GetPlayerSummaries/v0002/?key="+steamApiKey+"&steamids="+steamSixFourId+"?",function(steamGetInfo) {
                var profileUrl = "<a href='"+ steamGetInfo.response.players.profileurl+"'><img src='"+steamGetInfo.response.players.avatarfull+" \/><\/a>";

           $('#steamInfoWidget').html("Logo Link: " + profileUrl);
           });
        });

Sorry if this isn't standard, just trying to help :)

Right now I'm just trying to see if I can even get the image (which I cant for some reason). But it will just be used to display the users profile image and online status (personastate). (I can do those by myself, just no idea why this isnt working) — Shixma, Aug 14 '15 at 09:28
Also note that some API endpoints don't clearly communicate if profiles are private. — luckydonald, May 06 '18 at 02:15

How to use steam API json data in html with jquery?

1 Answers1