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:

https://i.stack.imgur.com/kvcxg.png

it said : Uncaught SyntaxError: Unexpected token :

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

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&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.

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.

I will try this, im still at work. thank you very much for the answer.. I'll tell you how it goes later :) — Raditya D., Jun 25 '15 at 07:58
*I edited my question :) please check it out.* hey I tried your solution, it doesn't show anything. When I change the dataType to JSON, when I pressed F12 in my chrome for debug mode there's no response from the ajax. When it's JSONP it has a response but still it doesn't show anything. Please kindly check my web for it : bool.hol.es/median/origasme.php — Raditya D., Jun 25 '15 at 10:13
@RadityaD. hi, unfortunately the Steam API only returns JSON and XML responses NOT JSONP. The only way you could do now is use backend code to fetch from Steam. (e.g. via PHP or Java) — khakiout, Jun 29 '15 at 09:55

Showing data from Steam Dota 2 API JSON using Jquery (ajax)

1 Answers1

EDIT

First (Steam DOTA 2 Response)

Second (Using jQuery AJAX)

Third (jQuery each())