Home » Php » PHP Multidimensional JSON Array to HTML Table

PHP Multidimensional JSON Array to HTML Table

Posted by: admin February 25, 2020 Leave a comment

Questions:

I have a multidimensional JSON array and I would like to generate a bacis HTML table basic in this data.

The JSON is in the following format – link here;

[
    {
        "id": 1,
        "date": "10.02.2020",
        "floor": "Ground",
        "room_name": "G01",
        "room_status": 1,
        "hour": {
            "08": 1,
            "09": 2,
            "10": 1,
            "11": 2,
            "12": 0,
            "13": 1,
            "14": 2,
            "15": 2,
            "16": 1,
            "17": 0,
            "18": 1,
            "19": 1,
            "20": 0
        }
    },
    {
        "id": 2,
        "date": "10.02.2020",
        "floor": "Ground",
        "room_name": "G02",
        "room_status": 2,
        "hour": {
            "08": 1,
            "09": 1,
            "10": 0,
            "11": 0,
            "12": 0,
            "13": 0,
            "14": 1,
            "15": 1,
            "16": 0,
            "17": 1,
            "18": 1,
            "19": 1,
            "20": 1
        }
    },
    {
        "id": 3,
        "date": "10.02.2020",
        "floor": "Ground",
        "room_name": "G03",
        "room_status": 1,
        "hour": {
            "08": 0,
            "09": 2,
            "10": 2,
            "11": 2,
            "12": 0,
            "13": 2,
            "14": 1,
            "15": 0,
            "16": 1,
            "17": 1,
            "18": 1,
            "19": 2,
            "20": 2
        }
    },
    {
        "id": 4,
        "date": "10.02.2020",
        "floor": "Ground",
        "room_name": "G04",
        "room_status": 2,
        "hour": {
            "08": 1,
            "09": 2,
            "10": 2,
            "11": 1,
            "12": 1,
            "13": 0,
            "14": 0,
            "15": 1,
            "16": 0,
            "17": 2,
            "18": 0,
            "19": 1,
            "20": 2
        }
    },
    {
        "id": 5,
        "date": "10.02.2020",
        "floor": "Ground",
        "room_name": "G05",
        "room_status": 2,
        "hour": {
            "08": 1,
            "09": 2,
            "10": 1,
            "11": 0,
            "12": 0,
            "13": 0,
            "14": 2,
            "15": 1,
            "16": 1,
            "17": 2,
            "18": 2,
            "19": 1,
            "20": 1
        }
    }
]

I need to loop through this data and display the date, floor and room_name on the left hand column. I am able to do this, however I also need to display the hour and room_status in the same table cell. I don’t know how to achieve this.

I need my final table to look like this (please note I will be changing the integers to strings in the final table, i.e 0 = false, 1 = true, etc);

+------------+-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+
| Room       |     |     |     |     |     |     |     |     |     |     |     |     |     |
+------------+-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+
| 10.02.2020 | 08  | 09  | 10  | 11  | 12  | 13  | 14  | 15  | 16  | 17  | 18  | 19  | 20  |
| Ground     |     |     |     |     |     |     |     |     |     |     |     |     |     |
| G01        | 1   | 2   | 1   | 2   | 0   | 1   | 2   | 2   | 1   | 0   | 1   | 1   | 0   |
+------------+-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+
| 10.02.2020 | 08  | 09  | 10  | 11  | 12  | 13  | 14  | 15  | 16  | 17  | 18  | 19  | 20  |
| Ground     |     |     |     |     |     |     |     |     |     |     |     |     |     |
| G02        | 1   | 1   | 0   | 0   | 0   | 0   | 1   | 1   | 0   | 1   | 1   | 1   | 1   |
+------------+-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+
| 10.02.2020 | 08  | 09  | 10  | 11  | 12  | 13  | 14  | 15  | 16  | 17  | 18  | 19  | 2   |
| Ground     |     |     |     |     |     |     |     |     |     |     |     |     |     |
| G02        | 0   | 2   | 2   | 2   | 0   | 2   | 1   | 0   | 1   | 1   | 1   | 2   |     |
+------------+-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+
| etc        | etc | etc | etc | etc | etc | etc | etc | etc | etc | etc | etc | etc | etc |
+------------+-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+

In the table above hour is the top value in the cell (08 to 20) and room_status is the value below (0, 1 or 2).

My PHP code is;

$string = file_get_contents("data.json");
$json = json_decode($string, true);

<?php foreach($json as $room): ?>
    <tr>
        <td>
            <p><?php echo $room['date']; ?></p>
            <p><?php echo $room['floor']; ?></p>
            <p><?php echo $room['room_name']; ?></p>
        </td>
        // need help with populating the other table cells here
    </tr>
<?php endforeach; ?>

I know I need some sort of nested foreach loop in order to access the hour key and values but I can’t figure it out :/

Any help is appreciated.

How to&Answers:

I think thats what your looking for:

$string = file_get_contents("data.json");
$json = json_decode($string, true);

<?php foreach($json as $room): ?>
    <tr>
        <td>
            <p><?php echo $room['date']; ?></p>
            <p><?php echo $room['floor']; ?></p>
            <p><?php echo $room['room_name']; ?></p>
        </td>
        <?php foreach($room['hour'] as $hour => $status): ?>
          <td>
            <p><?php echo $hour; ?></p>
            <p><?php echo $status; ?></p>
          </td>
        <?php endforeach; ?>    
    </tr>
<?php endforeach; ?>

Answer:

There are better ways of making the table but this should achieve what you are looking for;

$string = file_get_contents("data.json");
$json = json_decode($string, true);

<?php foreach($json as $room): ?>
    <tr>
        <td>
            <p><?php echo $room['date']; ?></p>
            <p><?php echo $room['floor']; ?></p>
            <p><?php echo $room['room_name']; ?></p>
        </td>
        <?php 
            foreach($room["hour"] as $hour => $status){
                echo "<td>" $hour . "<br/>" . $status . "</td>"
            }
        ?>
    </tr>
<?php endforeach; ?>

Answer:

foreach( $room['hour'] as $hour) 
{
...
}

and so on…nested in your foreach