Fatal编程技术网

HTML/JSON/Javascript/AJAX

javascript html jquery ajax

HTML/JSON/Javascript/AJAX,javascript,html,jquery,ajax,Javascript,Html,Jquery,Ajax,我曾尝试将JSON中的一些内容显示到本地主机站点（“market_hash_name”和“image”）中，但在该站点上打印出的43个结果中只有一个，但在控制台中打印出了所有元素 我使用“document.getElementById”在html站点上显示它 我的问题是: 是否有任何类型的循环可以用来显示html站点上所有的market\u hash\u名称和图像 <html> <head> <title>Inventory</t

我曾尝试将JSON中的一些内容显示到本地主机站点（“market_hash_name”和“image”）中，但在该站点上打印出的43个结果中只有一个，但在控制台中打印出了所有元素

我使用“document.getElementById”在html站点上显示它

我的问题是: 是否有任何类型的循环可以用来显示html站点上所有的market\u hash\u名称和图像

<html>
    <head>
        <title>Inventory</title>
    </head>
        <body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$.ajax({
    url: 'inventory.json',
    dataType: 'json',
    type: 'get',
    contentType: "text/html; charset=UTF-8",
    cache: false,
    success: function(data){
        $(data.data.steam_inventory.items).each(function(index, value){  
            var marketname = value.market_hash_name
            var urlicon = value.image

            document.getElementById("outputIconURL").src = urlicon
            document.getElementById("outputName").innerHTML = marketname
        
            console.log(marketname, "\n", urlicon)

        });
    }
});

</script>
<img id=outputIconURL width="350" height="300">
<p id=outputName></p>
        </body>
</html>
您正在使用
innerHTML
，因此您的内容将被覆盖，并且只显示最后一个内容。相反，您可以在每个循环中生成htmls，并将其附加到某个div

演示代码：

var数据={
“状态”：“成功”，
“数据”：{
“蒸汽库存”：{
“项目”：[{
“市场名称”：“Prisma 2案例”，
“图像”：https://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXU5A1PIYQNqhpOSV-fRPasw8rsUFJ5KBFZv668FFU1nfbOIj8W7oWzkYLdlPOsMOmIk2kGscAj2erE99Sn2AGw_0M4NW2hIYOLMlhpcmY0CRM/256fx256f",
},
{
“市场名称”：“Tec-9城市DDPAT（现场测试）”，
“图像”：https://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpoor-mcjhoyszMdS1D-OOjhoK0mvLwOq7c2D4B6pwijLiXpt6s3lDkrkJvZG-hLI7Ee1M7YVmC8gO-kunrjZK1tJXXiSw0uDynv1g/256fx256f",
}
]
}
}
}
$（data.data.steam\u inventory.items）。每个（函数（索引、值）{
var marketname=value.market\u散列\u名称
var urlicon=value.image
//附加数据
$（“#结果”）.append（“
”+marketname+”
”）
});



我说的是您试图显示所有项目的列表，对吗？您在每次迭代中都会替换值，而不是附加值。@Ian仅显示“市场名称”和“图像”。在本例中，它将是3x market\u hash\u name和3x image谢谢！有一个问题，您已经将json文件粘贴到HTML文件中，我如何使用外部文件呢？您好，这只是为了演示。您只需将代码放入当前每个循环代码的
每个循环中，不要忘记将
添加到html中

{
  "status": "success",
  "data": {
    "app_id": "730",
    "context_id": "2",
    "steam_inventory": {
      "status": "success",
      "fresh_or_cached": "cached",
      "total_items": 45,
      "items": [
        {
          "app_id": "730",
          "context_id": "2",
          "number_of_items": 2,
          "item_ids": [
            "20276818150",
            "20224634211"
          ],
          "asset_ids": [
            "20276818150",
            "20224634211"
          ],
          "class_id": "3761545285",
          "instance_id": "0",
          "market_hash_name": "Prisma 2 Case",
          "suggested_price": "0.03",
          "item_type": "Container",
          "item_class": null,
          "item_rarity": null,
          "item_weapon": null,
          "item_quality": "Base Grade",
          "item_itemset": "The Prisma 2 Collection",
          "image": "https://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXU5A1PIYQNqhpOSV-fRPasw8rsUFJ5KBFZv668FFU1nfbOIj8W7oWzkYLdlPOsMOmIk2kGscAj2erE99Sn2AGw_0M4NW2hIYOLMlhpcmY0CRM/256fx256f",
          "inspectable": false,
          "inspect_link": null,
          "phase": null,
          "tags": {
            "type": "Container",
            "collection": "The Prisma 2 Collection",
            "category": "Normal",
            "quality": "Base Grade"
          },
          "has_buy_orders": false,
          "recent_sales_info": null,
          "stickers": null,
          "fraud_warnings": [
            [],
            []
          ],
          "is_listing_allowed": false
        },
        {
          "app_id": "730",
          "context_id": "2",
          "number_of_items": 1,
          "item_ids": [
            "20276522620"
          ],
          "asset_ids": [
            "20276522620"
          ],
          "class_id": "469444882",
          "instance_id": "302028390",
          "market_hash_name": "Tec-9 | Urban DDPAT (Field-Tested)",
          "suggested_price": "0.04",
          "item_type": "Pistol",
          "item_class": null,
          "item_rarity": null,
          "item_weapon": "Tec-9",
          "item_quality": "Consumer Grade",
          "item_itemset": "The Bank Collection",
          "image": "https://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpoor-mcjhoyszMdS1D-OOjhoK0mvLwOq7c2D4B6pwijLiXpt6s3lDkrkJvZG-hLI7Ee1M7YVmC8gO-kunrjZK1tJXXiSw0uDynv1g/256fx256f",
          "inspectable": true,
          "inspect_link": "steam://rungame/730/76561202255233023/+csgo_econ_action_preview%20S76561198248775632A%asset_id%D7936680248821929362",
          "phase": null,
          "tags": {
            "type": "Pistol",
            "weapon": "Tec-9",
            "collection": "The Bank Collection",
            "category": "Normal",
            "quality": "Consumer Grade",
            "exterior": "Field-Tested"
          },
          "has_buy_orders": false,
          "recent_sales_info": null,
          "stickers": null,
          "fraud_warnings": [
            []
          ],
          "is_listing_allowed": false
        },
        {
          "app_id": "730",
          "context_id": "2",
          "number_of_items": 1,
          "item_ids": [
            "20215185457"
          ],
          "asset_ids": [
            "20215185457"
          ],
          "class_id": "4141779477",
          "instance_id": "519977179",
          "market_hash_name": "Desert Eagle | The Bronze (Factory New)",
          "suggested_price": "0.34",
          "item_type": "Pistol",
          "item_class": null,
          "item_rarity": null,
          "item_weapon": "Desert Eagle",
          "item_quality": "Industrial Grade",
          "item_itemset": "The Control Collection",
          "image": "https://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgposr-kLAtl7PLFTjNX4d6zhpO0leX7PaHUqWdY781lxLCZo9yh3gW3_hJqNj_2Jo6TelI8NQmErlPsyLq90ZPvtJnLm3Ux6CA8pSGK8qELUuc/256fx256f",
          "inspectable": true,
          "inspect_link": "steam://rungame/730/76561202255233023/+csgo_econ_action_preview%20S76561198248775632A%asset_id%D16890227741044942403",
          "phase": null,
          "tags": {
            "type": "Pistol",
            "weapon": "Desert Eagle",
            "collection": "The Control Collection",
            "category": "Normal",
            "quality": "Industrial Grade",
            "exterior": "Factory New"
          },
          "has_buy_orders": false,
          "recent_sales_info": {
            "hours": "18.86",
            "average_price": "0.27"
          },
          "stickers": null,
          "fraud_warnings": [
            []
          ],
          "is_listing_allowed": true
        },