I'm trying to show data I got from Steam Dota2 Api using jquery ajax. I'm pretty new to jquery and javascript in general, please bear with me.
here's my current code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MEDIAN</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div id="bro"></div>
<script>
$.ajax({ url:"https://api.steampowered.com/IDOTA2Match_570/GetMatchHistory/V001/?key=[MUH_KEY]&account_id=[MUH_STEAMID]",
dataType:"jsonp",
success:function(data) {
$.each(data.matches, function(i,value){
$.each(this, function() {
$.each(this, function() {
$('#bro').append(''+this.match_id+' '+this.match_seq_num+' '+this.start_time+' '+this.lobby_type+' '+this.radiant_team_id+' '+this.dire_team_id);
});
});
});
}
});
</script>
</body>
</html>
And here's the JSON, for me it's hard to understand this nested array (cmiiw) and showing it through jquery. It's not the entire json because it's too long.
{
"result": {
"status": 1,
"num_results": 100,
"total_results": 500,
"results_remaining": 400,
"matches": [
{
"match_id": 1577193573,
"match_seq_num": 1411082036,
"start_time": 1435073740,
"lobby_type": 0,
"radiant_team_id": 0,
"dire_team_id": 0,
"players": [
{
"account_id": 4294967295,
"player_slot": 0,
"hero_id": 97
},
{
"account_id": 113922244,
"player_slot": 1,
"hero_id": 49
},
{
"account_id": 4294967295,
"player_slot": 2,
"hero_id": 83
},
{
"account_id": 4294967295,
"player_slot": 3,
"hero_id": 40
},
{
"account_id": 4294967295,
"player_slot": 4,
"hero_id": 19
},
{
"account_id": 84884311,
"player_slot": 128,
"hero_id": 77
},
{
"account_id": 101673984,
"player_slot": 129,
"hero_id": 21
},
{
"account_id": 58768092,
"player_slot": 130,
"hero_id": 16
},
{
"account_id": 4294967295,
"player_slot": 131,
"hero_id": 46
},
{
"account_id": 120135659,
"player_slot": 132,
"hero_id": 74
}
]
},
{
"match_id": 1577051324,
"match_seq_num": 1410978056,
"start_time": 1435070603,
"lobby_type": 0,
"radiant_team_id": 0,
"dire_team_id": 0,
"players": [
{
"account_id": 4294967295,
"player_slot": 0,
"hero_id": 43
},
{
"account_id": 4294967295,
"player_slot": 1,
"hero_id": 12
},
{
"account_id": 4294967295,
"player_slot": 2,
"hero_id": 9
},
{
"account_id": 4294967295,
"player_slot": 3,
"hero_id": 19
},
{
"account_id": 4294967295,
"player_slot": 4,
"hero_id": 30
},
{
"account_id": 196130407,
"player_slot": 128,
"hero_id": 18
},
{
"account_id": 84884311,
"player_slot": 129,
"hero_id": 39
},
{
"account_id": 101673984,
"player_slot": 130,
"hero_id": 23
},
{
"account_id": 4294967295,
"player_slot": 131,
"hero_id": 2
},
{
"account_id": 58768092,
"player_slot": 132,
"hero_id": 60
}
]
},
{
"match_id": 1574412512,
"match_seq_num": 1408948467,
"start_time": 1434985184,
"lobby_type": 0,
"radiant_team_id": 0,
"dire_team_id": 0,
"players": [
{
"account_id": 37914001,
"player_slot": 0,
"hero_id": 34
},
{
"account_id": 30219675,
"player_slot": 1,
"hero_id": 25
},
{
"account_id": 84884311,
"player_slot": 2,
"hero_id": 62
},
{
"account_id": 101673984,
"player_slot": 3,
"hero_id": 93
},
{
"account_id": 58768092,
"player_slot": 4,
"hero_id": 2
},
{
"account_id": 100475325,
"player_slot": 128,
"hero_id": 4
},
{
"account_id": 102345123,
"player_slot": 129,
"hero_id": 22
},
{
"account_id": 4294967295,
"player_slot": 130,
"hero_id": 52
},
{
"account_id": 112187078,
"player_slot": 131,
"hero_id": 13
},
{
"account_id": 4294967295,
"player_slot": 132,
"hero_id": 97
}
]
},
{
"match_id": 1571382630,
"match_seq_num": 1406558738,
"start_time": 1434895885,
"lobby_type": 0,
"radiant_team_id": 0,
"dire_team_id": 0,
"players": [
{
"account_id": 4294967295,
"player_slot": 0,
"hero_id": 44
},
{
"account_id": 197159693,
"player_slot": 1,
"hero_id": 95
},
{
"account_id": 231158000,
"player_slot": 2,
"hero_id": 75
},
{
"account_id": 4294967295,
"player_slot": 3,
"hero_id": 57
},
{
"account_id": 4294967295,
"player_slot": 4,
"hero_id": 26
},
{
"account_id": 198610762,
"player_slot": 128,
"hero_id": 8
},
{
"account_id": 4294967295,
"player_slot": 129,
"hero_id": 31
},
{
"account_id": 58768092,
"player_slot": 130,
"hero_id": 58
},
{
"account_id": 84884311,
"player_slot": 131,
"hero_id": 17
},
{
"account_id": 4294967295,
"player_slot": 132,
"hero_id": 18
}
]
},
{
"match_id": 1562422288,
"match_seq_num": 1399749958,
"start_time": 1434643670,
"lobby_type": 0,
"radiant_team_id": 0,
"dire_team_id": 0,
"players": [
{
"account_id": 4294967295,
"player_slot": 0,
"hero_id": 14
},
{
"account_id": 4294967295,
"player_slot": 1,
"hero_id": 39
},
{
"account_id": 58768092,
"player_slot": 2,
"hero_id": 74
},
{
"account_id": 135094180,
"player_slot": 3,
"hero_id": 71
},
{
"account_id": 4294967295,
"player_slot": 4,
"hero_id": 26
},
{
"account_id": 4294967295,
"player_slot": 128,
"hero_id": 82
},
{
"account_id": 176933908,
"player_slot": 129,
"hero_id": 35
},
{
"account_id": 4294967295,
"player_slot": 130,
"hero_id": 84
},
{
"account_id": 4294967295,
"player_slot": 131,
"hero_id": 86
},
{
"account_id": 4294967295,
"player_slot": 132,
"hero_id": 43
}
]
},
{
"match_id": 1550411362,
"match_seq_num": 1389413408,
"start_time": 1434223325,
"lobby_type": 0,
"radiant_team_id": 0,
"dire_team_id": 0,
"players": [
{
"account_id": 4294967295,
"player_slot": 0,
"hero_id": 100
},
{
"account_id": 4294967295,
"player_slot": 1,
"hero_id": 27
},
{
"account_id": 4294967295,
"player_slot": 2,
"hero_id": 22
},
{
"account_id": 4294967295,
"player_slot": 3,
"hero_id": 72
},
{
"account_id": 4294967295,
"player_slot": 4,
"hero_id": 88
},
{
"account_id": 4294967295,
"player_slot": 128,
"hero_id": 19
},
{
"account_id": 58768092,
"player_slot": 129,
"hero_id": 60
},
{
"account_id": 4294967295,
"player_slot": 130,
"hero_id": 47
},
{
"account_id": 4294967295,
"player_slot": 131,
"hero_id": 101
},
{
"account_id": 71037623,
"player_slot": 132,
"hero_id": 34
}
]
},
{
"match_id": 1550116146,
"match_seq_num": 1389164026,
"start_time": 1434214249,
"lobby_type": 0,
"radiant_team_id": 0,
"dire_team_id": 0,
"players": [
{
"account_id": 100783247,
"player_slot": 0,
"hero_id": 110
},
{
"account_id": 4294967295,
"player_slot": 1,
"hero_id": 44
},
{
"account_id": 58768092,
"player_slot": 2,
"hero_id": 63
},
{
"account_id": 98612564,
"player_slot": 3,
"hero_id": 69
},
{
"account_id": 4294967295,
"player_slot": 4,
"hero_id": 21
},
{
"account_id": 4294967295,
"player_slot": 128,
"hero_id": 5
},
{
"account_id": 151175026,
"player_slot": 129,
"hero_id": 11
},
{
"account_id": 125128397,
"player_slot": 130,
"hero_id": 36
},
{
"account_id": 168588757,
"player_slot": 131,
"hero_id": 84
},
{
"account_id": 4294967295,
"player_slot": 132,
"hero_id": 4
}
]
},
{
"match_id": 1550018804,
"match_seq_num": 1389030960,
"start_time": 1434211724,
"lobby_type": 0,
"radiant_team_id": 0,
"dire_team_id": 0,
"players": [
{
"account_id": 127632092,
"player_slot": 0,
"hero_id": 27
},
{
"account_id": 4294967295,
"player_slot": 1,
"hero_id": 14
},
{
"account_id": 124189864,
"player_slot": 2,
"hero_id": 12
},
{
"account_id": 123645856,
"player_slot": 3,
"hero_id": 46
},
{
"account_id": 122643576,
"player_slot": 4,
"hero_id": 7
},
{
"account_id": 122142430,
"player_slot": 128,
"hero_id": 29
},
{
"account_id": 100783247,
"player_slot": 129,
"hero_id": 94
},
{
"account_id": 4294967295,
"player_slot": 130,
"hero_id": 20
},
{
"account_id": 58768092,
"player_slot": 131,
"hero_id": 60
},
{
"account_id": 98612564,
"player_slot": 132,
"hero_id": 2
}
]
},
{
"match_id": 1544605676,
"match_seq_num": 1384279773,
"start_time": 1434031817,
"lobby_type": 0,
"radiant_team_id": 0,
"dire_team_id": 0,
"players": [
{
"account_id": 84884311,
"player_slot": 0,
"hero_id": 89
},
please pardon my English, and my programming skills, I stuck. thanks.
EDIT 1
When I change the dataType to JSON instead of JSONP it shows and error in my chrome :
XMLHttpRequest cannot load https://api.steampowered.com/IDOTA2Match_570/GetMatchHistory/V001/?key=KEY&account_id=ID. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://bool.hol.es' is therefore not allowed access.
I search SO for it, it's the problem about cross-platform, so I change it to JSONP.
But with JSONP there's also an error. Here it is:
https://i.stack.imgur.com/kvcxg.png
it said : Uncaught SyntaxError: Unexpected token :
EDIT
You won't be able to fetch any data from AJAX requests to Steam DOTA2 API due to
cross-domainorigin security. Usually, browsers won't allow HTML pages from a different domain to access data/AJAX requests from another domain - UNLESS the server allowed it through CORS. You may read up on CORS through MDN and other Stack Overflow Q&As.You could use JSONP which you have been trying to do. Unfortunately, the Steam DOTA2 API only allows XML and JSON requests. Not JSONP.
Now, as a solution to your problem you can request the data from Steam through your backend code (e.g. PHP, Java, etc) and expose a service on your HTML pages to fetch and render them.
Hope this helps :)
First (Steam DOTA 2 Response)
Let's examine the JSON response of the Steam DOTA2 API. This is just a shorter version of the response for clarity.
You can see that there are a lot of nested values in there. So if you want to get the
matchesarray, you can access it viadata.result.matches. Each of these matches contains aplayersarray.Second (Using jQuery AJAX)
Notice that the API returns a JSON response NOT JSONP. So you should change
dataType : 'jsonp'todataType: 'json'.Third (jQuery each())
If you want to loop through the matches, your code should be something like this:
Then if you want to loop through the
players, you need to loop through thematchesfirst. It's something like this:For more information, see jQuery each() documentation
Hope this helps.