How to display data from JSON to HTML table using PHP?

How to display data from JSON to HTML table using PHP?

JSON is a platform independent data inter-exchange technology. Like a database using JSON we can store and retrieve data. In this demo app let me show you how to fetch data from JSON to HTML table using PHP. To start with first let me create a valid JSON file as shown in below.

emp_records.json

{"employees":
[
{
"empName": "Swati Nanda",
"designation": "Project Manager",
"comtbpany": "InfoSys",
"mob": "9092353322"
},
{
"empName": "Pravat Mishra",
"designation": "English Trainer",
"company": "FM College",
"mob": "7847324432"
},
{
"empName": "Divya Singh",
"designation": "Sr. Content Writer",
"company": "Wipro",
"mob": "9625477893"
},
{
"empName": "Baby Roy",
"designation": "Graphic Engineer",
"company": "Tech Mahindra",
"mob": "9096266548"
},
{
"empName": "Satyabrata Panda",
"designation": "Sr. Software Engineer",
"company": "Capgemini",
"mob": "5567748833"
}
]
}

php-table-with-json-data

Now create your PHP file with the below line of Codes.

JSON-to-HTML.php

/*Fetching JSON file content using php file_get_contents method*/
$str_data = file_get_contents("emp-records.json");
$data = json_decode($str_data, true);

/*Initializing temp variable to design table dynamically*/
$temp = "<table>";

/*Defining table Column headers depending upon JSON records*/
$temp .= "<tr><th>Employee Name</th>";
$temp .= "<th>Designation</th>";
$temp .= "<th>Company</th>";
$temp .= "<th>Mobile Number</th></tr>";

/*Dynamically generating rows & columns*/
for($i = 0; $i < sizeof($data["employees"]); $i++)
{
$temp .= "<tr>";
$temp .= "<td>" . $data["employees"][$i]["empName"] . "</td>";
$temp .= "<td>" . $data["employees"][$i]["designation"] . "</td>";
$temp .= "<td>" . $data["employees"][$i]["company"] . "</td>";
$temp .= "<td>" . $data["employees"][$i]["mob"] . "</td>";
$temp .= "</tr>";
}

/*End tag of table*/
$temp .= "</table>";

/*Printing temp variable which holds table*/
echo $temp;

In the above codes first I am fetching the JSON file using file_get_contents() method. Then after I am decoding the JSON data and storing in a data variable. Temp is the variable which I used to generate dynamic html for table. Using string concatenation I am appending html and $data values to $temp. Finally using using echo I am printing the value of $temp.

Inside the table to Create dynamic rows I am using a for loop over total records count. To get total record count here I am using sizeof() method against $data[“employees”]. Then depending upon JSON record columns I am binding respective values to td’s.

tblClasses.css

/*Style for Table*/
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 4px;
font-family: arial;
}
/*Style for Table Header*/
th {
background: darkblue;
color: white;
text-align: left;
}
/*Style for Alternate Rows*/
table tr:nth-child(odd) {
background-color: #C2EBC3;
}
table tr:nth-child(even) {
background-color: #FFFFFF;
}

Without the above CSS code this demo app will run. But to make your table beautiful this CSS classes can help. Just copy paste these classes under style tag. This will give you a table as shown in the above figure.