PHP Multidimensional JSON Array to HTML Table

Question

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.

where is the hour and room_status on the expected table? — Common Man
– Common Man, Commented Feb 12, 2020 at 10:59

Robin Gillitzer · Accepted Answer · 2020-02-12 11:18:39Z

4

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

edited Feb 12, 2020 at 11:18

answered Feb 12, 2020 at 11:03

Robin Gillitzer

1,6121 gold badge9 silver badges18 bronze badges

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

3 Comments

TheOrdinaryGeek Over a year ago

This is perfect - thanks! I was close! Is there a more efficient way of achieving this or is my methos ok?

Robin Gillitzer Over a year ago

If it doesn't have to be responsive, its okay. Otherwise i would work with a Bootstrap Grid.

TheOrdinaryGeek Over a year ago

I am using BS, I stripped out all the classes for readability here. I'm more concerned with the PHP, but it all looks good

Dan · Accepted Answer · 2020-02-12 11:03:45Z

1

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

answered Feb 12, 2020 at 11:03

Dan

1832 silver badges14 bronze badges

2 Comments

TheOrdinaryGeek Over a year ago

Thanks for this, can you elaborate on There are better ways of making the table please?

Dan Over a year ago

Better ways of making this table was wrong, I meant you could make it "prettier" (assuming all room's contain the same length in hours)

luna80 · Accepted Answer · 2020-02-12 11:06:58Z

1

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

and so on...nested in your foreach

answered Feb 12, 2020 at 11:06

luna80

1533 silver badges16 bronze badges

Collectives™ on Stack Overflow

PHP Multidimensional JSON Array to HTML Table

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related