JSON (JavaScript Object Notation) is a platform independent data inter-exchange technology. To bulid a JSON file we follow XML formatting. JavaScript program can easily convert JSON data into JavaScript objects. Like a database using JSON we can store and retrieve data with multiple fields. In this demo app I am fetching a well formatted JSON file using PHP file_get_contents method. Then dynamically using html table, tr and td presenting those JSON records in a HTML Table.
To start with first let me create a valid JSON file. In below JSON file for each node we have 4 fields empName, designation, company and mob. To present data using JSON we follow key, value pair. Curly braces hold objects while Square brackets hold arrays.
emp_records.json
{"employees":
[
{
"empName": "Swati Nanda",
"designation": "Project Manager",
"company": "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"
},
{
"empName": "Sonam Singh",
"designation": "Graphic Engineer",
"company": "TCS",
"mob": "8260272137"
},
{
"empName": "Subash Roy",
"designation": "Jr. Software Engineer",
"company": "InfoSys BPO",
"mob": "5237748822"
},
{
"empName": "Mohini Mohapatra",
"designation": "UI/UX Engineer",
"company": "Synechron",
"mob": "8892978436"
},
{
"empName": "Supriti Kabi",
"designation": "Sr. HTML Developer",
"company": "InfoSys BPO",
"mob": "6667748877"
}
]
}
Now create your PHP file with the below lines of Code.
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;
Using the above PHP codes first I am reading the JSON file using file_get_contents() method. Then after using json_decode() method I am decoding the JSON data and storing in a variable like an Array. 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”] array. Then depending upon JSON records I am binding respective values to td’s for each row.
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 HTML 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. You must noticed here I am using tr:nth-child(odd) and tr:nth-child(even) with different background colors. This CSS selector helps to distigush alternate rows with different color codes.
