CODEWITHSUNDEEP
phphtmljsonimage
bbousq
bbousq

Reputation: 743

Creating html from json data in php

I cant figure out how to create a certain amount of image boxes for my site from data i got from a json file. So i'm using the "amount" variable in the json file and i want to use that to determine how many grid windows i have. I also want to use the "id" in the code too to replace the "CLASS ID" in the image. I screwed up the first time and i meant class id ;-;.

HTML GRIDS

     <div class="col-lg-2 col-sm-3 col-xs-4">
       <a href="#">
         <img src="https://steamcommunity-a.akamaihd.net/economy/image/class/730/"CLASS ID"/150fx125f" class="thumbnail img-responsive">
       </a>
     </div>

JSON FILE

{  
  "success":true,
  "rgInventory":{  
    "1984642382":{  
      "id":"1984642382",
      "classid":"469444591",
      "instanceid":"188530139",
      "amount":"1",
      "pos":38
    },
    "1984642357":{  
      "id":"1984642357",
      "classid":"469452066",
      "instanceid":"0",
      "amount":"1",
      "pos":39
    },
    "1983911296":{  
      "id":"1983911296",
      "classid":"310777476",
      "instanceid":"0",
      "amount":"1",
      "pos":40
    },
    "1947454623":{  
      "id":"1947454623",
      "classid":"360467265",
      "instanceid":"188531151",
      "amount":"1",
      "pos":41
    },
    "1947053285":{  
      "id":"1947053285",
      "classid":"360460096",
      "instanceid":"188530139",
      "amount":"1",
      "pos":42
    },
    "1908333346":{  
      "id":"1908333346",
      "classid":"310777578",
      "instanceid":"0",
      "amount":"1",
      "pos":43
    },
    "1900749367":{  
      "id":"1900749367",
      "classid":"666947032",
      "instanceid":"188530139",
      "amount":"1",
      "pos":44
    },
    "1900365118":{  
      "id":"1900365118",
      "classid":"310777271",
      "instanceid":"0",
      "amount":"1",
      "pos":45
    },
    "1900266239":{  
      "id":"1900266239",
      "classid":"310777215",
      "instanceid":"0",
      "amount":"1",
      "pos":46
    },
    "1900266235":{  
      "id":"1900266235",
      "classid":"310779180",
      "instanceid":"0",
      "amount":"1",
      "pos":47
    },
      },
      "rgCurrency":[  ],
      "rgDescriptions":{  },
      "more":false,
      "more_start":false
    }

Upvotes: 1

Views: 992

Answers (3)

JMozac
JMozac

Reputation: 61

Use this code for your problem

<?php
    $decode_data=json_decode($json_data,1);
    foreach($decode_data as $k=>$v){
        $val=$v;
        if(is_array($v)){
            foreach($v as $a=>$b){
                    echo '
             <div class="col-lg-2 col-sm-3 col-xs-4">
               <a href="#">
                 <img src="https://steamcommunity-a.akamaihd.net/economy/image/class/730/<b>'.$a.'</b>/150fx125f" class="thumbnail img-responsive">
               </a>
             </div>';
            }
        }
    }

Upvotes: 0

homelessDevOps
homelessDevOps

Reputation: 20726

First things first, there is an syntax error in you JSON Data at:

  "1900266235":{
  "id":"1900266235",
  "classid":"310779180",
  "instanceid":"0",
  "amount":"1",
  "pos":47
},

Correct:

"1900266235":{
  "id":"1900266235",
  "classid":"310779180",
  "instanceid":"0",
  "amount":"1",
  "pos":47
}

To print the needed amount of Image-Boxes you can convert your JSON Data into an PHP Array and print the HTML Code. I have prepared an Example where the JSON Data is read from Disk.

<?php

/**
* Create Image Box
*
* @param $imageId int imageId
* @return string ImageBOX HTML Code
*/
function printImageBox($imageID)
{
  $imageBox = '';

  $imageBox .= '<div class="col-lg-2 col-sm-3 col-xs-4">';
  $imageBox .= '<a href="#">';
  $imageBox .= sprintf('<img src="https://steamcommunity-a.akamaihd.net/economy/image/class/730/%d/150fx125f" class="thumbnail img-responsive">', $imageID);
  $imageBox .= '</a>';
  $imageBox .= '</div>';

  return $imageBox;
}

// read JSON File from disk
$data = file_get_contents('data.json');
$data = json_decode($data, true);
$inventory = $data["rgInventory"];

// foreach entry print an box..
foreach ($data["rgInventory"] as $key => $value) {
    echo printImageBox($key);
}

Results in:

enter image description here

Upvotes: 1

Disha V.
Disha V.

Reputation: 1864

I am not sure is this what you want in output, but i have tried following and tell me is it what you expected? Here, test.json is json file with your given json response.

<?php
$test = json_decode(file_get_contents('test.json'));
foreach ($test->rgInventory as $index=>$items) {
    //echo $index; // will get index
    ?>
    <div class="col-lg-2 col-sm-3 col-xs-4">
        <a href="#">
            <img src="https://steamcommunity-a.akamaihd.net/economy/image/class/730/<?= $items->id ?>/150fx125f" class="thumbnail img-responsive">
        </a>
    </div>
<?php
} ?>

Upvotes: 1

Related Questions