How to display JSON data in a dynamic html table with PHP

Updated: 27-Mar-2022 | Tags: PHP and JSON | Views: 5308

Introduction

Hello everyone.

In this article we are going to fetch the data from a JSON file and we are going to put them inside an HTML table. This is called a dynamic HTML table because we are going to use PHP variables to display the values stored in the JSON file.

The data that we have stored in the json file are products, so this is an inventory.

Live Demo

Click on the button bellow to see the dynamic table end result, that we will have when we finish the code.

The projects file structure

As you can see in the image below, inside the project's root we have:

A folder named product-images, in which we have the images of our products.
An index.php file (this is our home page), in which we are displaying the dynamic html table.
We have a products.json file, in which our products are stored in a JSON format.
And a styles.css file to make the table look pretty. I am not going through the css code in this article, it is not necessary for the tutorial. But if you want to download the source code you will get everything.

The JSON file

This is how the data looks in the JSON file. We have an array of objects. Every product is an object and has properties. Our products have an id, an image, a price, an inventory, and a product code property.

[
	{
		"id": 1,
		"image": "product-images/bike-1.jpeg",
		"name": "Orient Vita Pro 28\"",
		"price": "284",
		"inventory": 4,
		"productCode": "K203"
	},
	// 5 more products are following ...

The index file

In our index.php file and inside the body tags we are going to write our dynamic html table. Everything is simple html here, we have an opening table tag in line 2, and from line 3-10 we have a table row with table headers. Every table header is related to a product property. Except the last one who says "Actions".

<body>
	<table>
		<tr>
			<th>Product Image</th>
			<th>Name</th>
			<th>Price</th>
			<th>Product code</th>
			<th>Available items</th>
			<th>Actions</th>
		</tr>

Next (we are still inside the table), we are opening php tags to write php code.

   <?php
		$json_data = file_get_contents("products.json");
		$products = json_decode($json_data, true);

In line 13 we are using the file_get_contents function to fetch the data from the json file, and put them in the $json_data variable. The file_get_contents function takes as an argument the file name we want to read.
Next we have to convert the json data that the $json_data variable holds, to a php array so we have something we can work with.

In line 14 we use the json_decode function to do the job. The function takes as an argument the data that we want to decode, but here we also are passing the keyword true as a second argument.

The keyword true tells the function to return the decoded data as an array. If we omit the second argument the function will return an object.

This is the second part of the table, this is the dynamic code we will write so we display the products, that the $products array holds.

      if(count($products) != 0){
				foreach ($products as $product) {
					?>
						<tr>
							<td> <img src="<?php echo $product['image']; ?>" alt=""> </td>
							<td> <?php echo $product['name']; ?> </td>
							<td> <?php echo $product['price']; ?>€ </td>
							<td> <?php echo $product['productCode']; ?> </td>
							<td> <?php echo $product['inventory']; ?> </td>
							<td>
								<select name="actions" id="actions">
									<option value="">Select action</option>
									<option value="remove">Remove</option>
									<option value="edit">Edit</option>
									<option value="sold-out">Sold out</option>
								</select>
							</td>
						</tr>
					<?php
				}
			}
		?>
	</table>

We begin our code in line 15 with an if statement to see if the $products array is not empty. We use the count function to count the items in an array, if the result is any number else than zero, the array is not empty and we are gonna display the items.
In line 16 we loop through the $products array and fetch every product as a $product.
Now we have to put inside the table data the php code to get the product property we want to display in each <td></td> tag.
We know that we are dealing with an array, so we are going to use the square brackets [] to access the value. Ex. the $product['name'] will give us the products name, and the same goes for every $products value.

The result

And that's it if we run our home page in the browser we get the result that we see in the image. Click on the view demo button on the introduction section at the top of the page to check it out.

Displaying products in a dynamic html table

Source code

Thanks for reading, i hope you find the article helpful.
Please leave a comment if you find any error's, so i can update the page with the correct code. Or you just can say hi.

You can download the source code and use it in any way you like.

Times downloaded: 732