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

2.9k views Asked by At

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 :

1

There are 1 answers

3
khakiout On BEST ANSWER

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.