Trying out Steam's JSON API

Question

I'm trying to learn how to get items, through API's. And I'm currently trying to get an Avatar from a Steam API.

This is the jQuery I've wrote thus far:

$.getJSON("http://api.steampowered.com/ISteamUser/GetPlayerSummaries/v0002/?key=XXXXXXXXXXXXXXXX&steamids=76561197960435530", function(json) {
  console.log(json);
  $('#poster').html('<img id="thePoster" src=' + json[0].avatarmedium.url + ' />');
});

When I do:

console.log(json);

I get this result:

response: Object
players: Array[1]
0: Object
avatar: "steamcommunity/public/images/avatars/f1/f1dd60a188883caf82d0cbfccfe6aba0af1732d4.jpg"
avatarfull: "steamcommunity/public/images/avatars/f1/f1dd60a188883caf82d0cbfccfe6aba0af1732d4_full.jpg"
avatarmedium: "steamcommunity/public/images/avatars/f1/f1dd60a188883caf82d0cbfccfe6aba0af1732d4_medium.jpg"
communityvisibilitystate: 3
lastlogoff: 1448309489
loccityid: 3961
loccountrycode: "US"
locstatecode: "WA"
personaname: "Robin"
personastate: 0
personastateflags: 0
primaryclanid: "103582791429521412"
profilestate: 1
profileurl: "/id/robinwalker/"
realname: "Robin Walker"
steamid: "76561197960435530"
timecreated: 1063407589

And I'm trying to access the avatermedium URL you see above, so I simply show the avatar of a Steam profile, on the website.

But I can't seem to access it, if that makes sense. How do I do it?

Answer 1

Notice that the response is an object, the array is nested two levels down in the players property. So it should be:

json.response.players[0].avatarmedium

There's no .url property of avatarmedium , it's just a string.

Answer 2

I suggest trying this:

json.response.players[0].avatarmedium

You need to add ' http://cdn.akamai.steamstatic.com/ ':

'http://cdn.akamai.steamstatic.com/' + json.response.players[0].avatarmedium

 $.getJSON("http://api.steampowered.com/ISteamUser/GetPlayerSummaries/v0002/?key=XXXXXXXXXXXXXXXX&steamids=76561197960435530", function(json) { console.log(json); $('#poster').html('<img id="thePoster" src=' + 'http://cdn.akamai.steamstatic.com/' + json.response.players[0].avatarmedium + ' />'); }); 

Hoe that helps