Showing data from Steam Dota 2 API JSON using Jquery (ajax)
Question
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:
http://i.imgur.com/CGWT09j.png
it said : Uncaught SyntaxError: Unexpected token :
1 answers
solution1
1 ACCPTED 2015-06-25 07:14:32
EDIT
You won't be able to fetch any data from AJAX requests to Steam DOTA2 API due to cross-domain origin 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 & A s.
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 (eg 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.
var data = {
"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
}
]
},
{
"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
}
]
}
]
}
}
You can see that there are a lot of nested values in there. So if you want to get the matches array, you can access it via data.result.matches . Each of these matches contains a players array.
Second (Using jQuery AJAX)
Notice that the API returns a JSON response NOT JSONP . So you should change dataType : 'jsonp' to dataType: 'json' .
Third (jQuery each())
If you want to loop through the matches, your code should be something like this:
$.ajax({
url:"https://api.steampowered.com/IDOTA2Match_570/GetMatchHistory/V001/?key=[MUH_KEY]&account_id=[MUH_STEAMID]",
dataType:"json", // should be json NOT jsonp
success:function(data) {
// loop through the matches
$.each(data.result.matches, function(i, value){
$('#bro').append('<b>Match:</b> ' + match.match_id + ' ' + match.match_seq_num + ' ' + match.start_time + ' ' + match.lobby_type + ' ' + match.radiant_team_id + ' ' + match.dire_team_id + '<br>');
});
}
});
Then if you want to loop through the players , you need to loop through the matches first. It's something like this:
$.ajax({
url:"https://api.steampowered.com/IDOTA2Match_570/GetMatchHistory/V001/?key=[MUH_KEY]&account_id=[MUH_STEAMID]",
dataType:"json", // Should be json NOT jsonp
success:function(data) {
// loop through the matches
$.each(data.result.matches, function(i, match) {
// loop through the players in the match
$.each(match.players, function (j, player) {
$('#bro').append('<b>Player:</b> ' + player.account_id + ' ' + player.player_slot + ' ' + player.hero_id + '<br>');
});
});
}
});
For more information, see jQuery each() documentation
Hope this helps.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Using Jquery to display JSON data from API - showing undefined
Autocomplete field with JSON data from external url (Steam API)
Output data from JSON using AJAX and jQuery
retrieving data from API using JQuery/Ajax
Can't get JSON data from jQuery AJAX API call
How to get all steamapps using javascript-jquery in JSON format with Steam web API
Loading data from a JSON file using jQuery and AJAX
How to send data from Json using Ajax in jquery for html element?
jQuery $.ajax using local JSON data from global variable
How to get data from server by using JSON, JQuery and AJAX?
Related Tags