HTML / JSON / Javascript / AJAX

Question

i've tried to display some things from JSON into a localhost site ( "market_hash_name" and "image") but its only printing me one out of about 43 results on the site but in the console its printing all the elements.

i've used the " document.getElementById " to display it on the html site.

my question is: Is there any kind of loop i can use to display all the market_hash_names and image on the html site?

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

here is the JSON File but only 100 out of 4000 lines of code. should be enough.

{
  "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
        },

Am I right in saying that you're trying to display a list of all items? — Ian
– Ian, Commented Dec 30, 2020 at 13:45
You replace the values in each iteration rather than appending them. — Anurag Srivastava
– Anurag Srivastava, Commented Dec 30, 2020 at 13:47
@Ian only the "market_hash_name" and "image". In this example it would be 3x market_hash_name and 3x image — Temi1337
– Temi1337, Commented Dec 30, 2020 at 13:49

Swati · Accepted Answer · 2020-12-30 13:53:06Z

1

You are using innerHTML so your content is override and only last one display .Instead you can generate htmls in your each loop and append same to some div .

Demo Code :

var data = {
  "status": "success",
  "data": {
    "steam_inventory": {
      "items": [{
          "market_hash_name": "Prisma 2 Case",
          "image": "https://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXU5A1PIYQNqhpOSV-fRPasw8rsUFJ5KBFZv668FFU1nfbOIj8W7oWzkYLdlPOsMOmIk2kGscAj2erE99Sn2AGw_0M4NW2hIYOLMlhpcmY0CRM/256fx256f",

        },
        {
          "market_hash_name": "Tec-9 | Urban DDPAT (Field-Tested)",
          "image": "https://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpoor-mcjhoyszMdS1D-OOjhoK0mvLwOq7c2D4B6pwijLiXpt6s3lDkrkJvZG-hLI7Ee1M7YVmC8gO-kunrjZK1tJXXiSw0uDynv1g/256fx256f",

        }
      ]
    }
  }
}

$(data.data.steam_inventory.items).each(function(index, value) {
  var marketname = value.market_hash_name
  var urlicon = value.image
  //append datas
  $("#result").append("<div><img class='outputIconURL' src='" + urlicon + "' width='350' height='300'><p class='outputName'>" + marketname + "</p></div>")
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="result">
  <!--result will cme here--->
</div>

answered Dec 30, 2020 at 13:53

Swati

28.5k4 gold badges26 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Temi1337 Over a year ago

Thank you! One question, you've pasted the json file into the HTML file, how do i do it with an external file?

Swati Over a year ago

Hi, that is just for demo . You just need to put code inside each loop in your current each loop code and don't forget to add <div id="result"></div> to your html

Collectives™ on Stack Overflow

HTML / JSON / Javascript / AJAX

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related