Creating html from json data in php

Question

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
    }

Can we have json data response with multiple data? It would be easier how to code. — Disha V.
– Disha V., Commented Jul 31, 2015 at 4:56
@DishaV. I edited it but i dont know if its correctly formated the original was way to long to put in. — bbousq
– bbousq, Commented Jul 31, 2015 at 5:00

Disha V. · Accepted Answer · 2015-07-31 05:11:32Z

1

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

edited Jul 31, 2015 at 5:11

answered Jul 31, 2015 at 5:06

Disha V.

1,8641 gold badge13 silver badges21 bronze badges

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

6 Comments

bbousq Over a year ago

Thank you! also i have another question, on my json file there are the values and they are usually always going to be different is there a way to get those values without knowing what they are? to make it automated.

Disha V. Over a year ago

If you are talking about "1984642382" etc values then you can use it using $key. Check my edits. If it's not what you want to know then please do comment here.

bbousq Over a year ago

I screwed up i needed the class id in the place of the id

Disha V. Over a year ago

Replace $items->id with $items->classid

bbousq Over a year ago

One last thing, how would i do the marketname / name?

|

opHasNoName · Accepted Answer · 2015-07-31 05:21:30Z

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:

JMozac · Accepted Answer · 2015-07-31 05:36:04Z

0

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>';
            }
        }
    }

answered Jul 31, 2015 at 5:36

JMozac

613 bronze badges

Collectives™ on Stack Overflow

Creating html from json data in php

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related