堆栈内存溢出
  简体   繁体   English

使用Jquery显示来自Steam Dota 2 API JSON的数据（ajax）

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

 原文  2015-06-24 21:10:54  1   1    javascript/ jquery/ ajax/ steam-web-api

问题描述

I'm trying to show data I got from Steam Dota2 Api using jquery ajax. 我正在尝试显示使用jquery ajax从Steam Dota2 Api获得的数据。 I'm pretty new to jquery and javascript in general, please bear with me. 一般来说，我对jquery和javascript还是很陌生，请耐心等待。

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. 这是JSON，对我来说，很难理解这个嵌套数组（cmiiw）并通过jquery显示它。 It's not the entire json because it's too long. 它不是整个json，因为它太长了。 

{
    "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 编辑1

When I change the dataType to JSON instead of JSONP it shows and error in my chrome : 当我将dataType更改为JSON而不是JSONP时，它在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. 我在搜索它，这是关于跨平台的问题，因此我将其更改为JSONP。

But with JSONP there's also an error. 但是使用JSONP也会出现错误。 Here it is: 这里是：

http://i.imgur.com/CGWT09j.png http://i.imgur.com/CGWT09j.png

it said : Uncaught SyntaxError: Unexpected token : 它说：未捕获的SyntaxError：意外的令牌：

1 个解决方案

解决方案1
 1 已采纳  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. 由于cross-domain来源安全性，您将无法从AJAX请求中获取任何数据到Steam DOTA2 API。 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 . 通常，浏览器不允许来自其他域的HTML页面访问来自另一个域的数据/ AJAX请求- 除非服务器允许通过CORS进行访问 。 You may read up on CORS through MDN and other Stack Overflow Q & A s. 您可以通过CORS读了MDN和其他堆栈溢出Q ＆ 一个秒。

You could use JSONP which you have been trying to do. 您可以尝试使用JSONP。 Unfortunately, the Steam DOTA2 API only allows XML and JSON requests. 不幸的是，Steam DOTA2 API仅允许XML和JSON请求。 Not JSONP. 不是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. 现在，作为解决问题的方法，您可以通过后端代码（例如PHP，Java等）从Steam请求数据，并在HTML页面上公开服务以获取和呈现它们。

Hope this helps :) 希望这可以帮助 ：）

First (Steam DOTA 2 Response) 第一（Steam DOTA 2回应）

Let's examine the JSON response of the Steam DOTA2 API. 让我们检查Steam DOTA2 API的JSON响应。 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 . 所以，如果你想获得matches阵列，您可以通过访问data.result.matches 。 Each of these matches contains a players array. 每个匹配项都包含一个players数组。

Second (Using jQuery AJAX) 第二（使用jQuery AJAX）

Notice that the API returns a JSON response NOT JSONP . 请注意，API返回JSON响应NOT JSONP 。 So you should change dataType : 'jsonp' to dataType: 'json' . 因此，您应该将dataType : 'jsonp'更改为dataType: 'json' 。

Third (jQuery each()) 第三（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. 然后，如果您想遍历players ，则需要首先遍历matches 。 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 有关更多信息，请参见jQuery each（）文档。

Hope this helps. 希望这可以帮助。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 使用Jquery从API显示JSON数据-显示未定义 - Using Jquery to display JSON data from API - showing undefined 使用来自外部 url 的 JSON 数据的自动完成字段（Steam API） - Autocomplete field with JSON data from external url (Steam API) 使用AJAX和jQuery从JSON输出数据 - Output data from JSON using AJAX and jQuery 使用JQuery / Ajax从API检索数据 - retrieving data from API using JQuery/Ajax 无法从jQuery AJAX API调用获取JSON数据 - Can't get JSON data from jQuery AJAX API call 如何使用带有 Steam Web API 的 JSON 格式的 javascript-jquery 获取所有 Steam 应用 - How to get all steamapps using javascript-jquery in JSON format with Steam web API 使用jQuery和AJAX从JSON文件加载数据 - Loading data from a JSON file using jQuery and AJAX 如何使用Ajax在jquery中为jtml元素发送数据？ - How to send data from Json using Ajax in jquery for html element? jQuery $ .ajax使用来自全局变量的本地JSON数据 - jQuery $.ajax using local JSON data from global variable 如何通过使用JSON，JQuery和AJAX从服务器获取数据？ - How to get data from server by using JSON, JQuery and AJAX?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM