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

The JSON file

The JSON file contains an array of objects. Every object is a product. Each product has an id, an image, a price, an inventory, and a product code property.

[
	{
		"id": 1,
		"image": "bike-1.jpeg",
		"name": "Orient Vita Pro 28\"",
		"price": "284",
		"inventory": 4,
		"productCode": "K203"
	},
	{
		"id": 2,
		"image": "bike-2.jpeg",
		"name": "Orient S-400 26\"",
		"price": "198",
		"inventory": 14,
		"productCode": "K433"
	},
	{
		"id": 3,
		"image": "bike-3.jpeg",
		"name": "Bullet Bora 20\"",
		"price": "350",
		"inventory": 7,
		"productCode": "K012"
	},
	{
		"id": 4,
		"image": "guitar-1.png",
		"name": "Feder handmade",
		"price": "790",
		"inventory": 5,
		"productCode": "G0127"
	},
	{
		"id": 5,
		"image": "guitar-2.png",
		"name": "Ibanez G120",
		"price": "430",
		"inventory": 2,
		"productCode": "G1233"
	},
	{
		"id": 6,
		"image": "guitar-3.png",
		"name": "Feder Blues edition",
		"price": "650",
		"inventory": 6,
		"productCode": "G4478"
	}
]

Live Demo

Click on the button below to see the dynamic json html table that we will have at the end of this tutorial. View Demo

The projects file structure

/-- root
  |-- index.php
  |-- styles.css
  |-- product-images/
    |-- bike-1.jpeg
    |-- bike-2.jpeg
    ... and 4 more images

In our project's directory, we have an index.php file which is our homepage and will contain the HTML table. We gave the file a .php extension because we are going to include php code in the file.

We have a styles.css file to make the HTML table look pretty. Download the source code to get the css file.

And last we have a folder named product-images/, which folder contains the images of each product. Every image name in the folder is associated with the corresponding product in the JSON file.

The HTML Table

In our index.php file we are going to write our dynamic html table.

<table>
<!-- The first row is the table's header -->
	<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 goign to fetch the products 
	from the JSON file and display each product 
	in a table row. 
-->

<?php
/*
	We are going to use the file_get_contents function 
	to fetch the data from the json file, and store them 
	in the $json_data variable. 
	The file_get_contents function takes as an argument 
	the path to the filename we want to read.
 */
	$json_data = file_get_contents("products.json");

/*
	Next we have to convert the data that the $json_data 
	variable holds, to an php array so we have something 
	we can work with.
	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
 */
	$products = json_decode($json_data, true);

/*
	Next we have 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.
 */
	if(count($products) != 0){
	
	/*
		Next, we will loop through the $products array and fetch
		each product in a table row.
	 */	
		foreach ($products as $product) {
		// We are ecpaning php so we can write html code.
		?> 
			<tr>
				<td>
					<img 
						src="product-images/<?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>	

Summary

And that's it we saw how to display dynamic data from a JSON file in an HTML table using php.

We used the file_get_contents function to read the JSON file, and then the json_decode function to convert the json data to an php array.

Last Words

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.

Source code

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

Times downloaded: 979

Buy me a coffee