Create table with left anf top headings form JSON data

Question

I have a JSON of which i need to extract headings and data inot a html table that contains top and left headings. I have provided a snippet of what the table data shoukld present. Can anyone please help with the logic of breaking down the foreach to be able to display the html corrcetly.

$json ='{
    "jform": {
    "product": ["3", "4"],
    "type": "101"
    },
    "mainheading": "TYPICAL ANALYSIS",
    "heading1": "NatraMin Original",
    "heading2": "NatraMin Cal-S",
    "heading3": "NatraMin Cal-K",
    "heading4": "",
    "heading5": "",
    "heading6": "",
    "heading7": "",
    "heading8": "",
    "maindata": ["Calcium", "Phosphorus"],
    "data1": ["c12%", "p12%"],
    "data2": ["c13%", "p13%"],
    "data3": ["c14%", "p14%"],
    "data4": ["", ""],
    "data5": ["", ""],
    "data6": ["", ""],
    "data7": ["", ""],
    "data8": ["", ""],
    "itemid": "2"
}';

$tableData = json_decode($json);

foreach ($tableData as $key => $value) {


    echo $key.':'.$value.'<br/>';   

}

The snippet below is merely the html im using to create teh sample table screengrab below it. I need to somehow incoprprate sections of that html into teh foreach. I tried nesting teh foreach but just messed it up more hence why i have removed my trys and just provided code as cleanly as possible.

 echo '        
    <style> 

    table {} 
    table td.top { padding: 10px; background-color: red;color: white}
    table th.top { padding: 10px; background-color: blue; color: white}
    table th.side { padding: 10px; background-color: green; color: white}
    table td { padding: 10px;  border-bottom:1px solid #ededed; text-align:center;}

    </style>

    <table class="table">
        <tbody>
            <tr>
              <th class="top" >TYPICAL ANALYSIS</th>
                <td  class="top" >NatraMin Original</td>
                <td  class="top" >NatraMin Cal-S</td>
                <td  class="top" >NatraMin Cal-K</td>
            </tr>
            <tr>
              <th class="side" >Calcium</th>
                <td>c12%</td>
                <td>c13%</td>
                <td>c14%</td>
            </tr>
            <tr>
              <th class="side" >Phosphorus</th>
                <td>p12%</td>
                <td>p13%</td>
                <td>p14%</td>
            </tr>

        </tbody>
    </table>';

When i run the very top code snippet on phptester.net i get the following output, im not too worried about the empty values i just need to make sure the values that contain data are matched up against the table properly.

Error Object of class stdClass could not be converted to string on line number 33
jform:
mainheading:TYPICAL ANALYSIS
heading1:NatraMin Original
heading2:NatraMin Cal-S
heading3:NatraMin Cal-K
heading4:
heading5:
heading6:
heading7:
heading8:
maindata:Array
data1:Array
data2:Array
data3:Array
data4:Array
data5:Array
data6:Array
data7:Array
data8:Array
itemid:2

Thanks in advance :) John

Answer 1

Here is what you looking for:

$tableData = json_decode($json, true);
$mainheading = $tableData['mainheading'];
$HTML_table = "<table>";
// headers
$HTML_table .= "<tr>";
$HTML_table .= "<th class='top1'>$mainheading</th>";
for($i=1; $i<=8; $i++) {
    $d = $tableData["heading$i"];
    if(!empty($d))
        $HTML_table .= "<th class='top2'>$d</th>";
}
$HTML_table .= "</tr>";
// end of headings

// main data
$mainData = $tableData['maindata'];
$mainDataCount = count($mainData);
for($i=0; $i<$mainDataCount; $i++) {
    $d = $mainData[$i];
    $HTML_table .= "<tr>";
    $HTML_table .= "<td class='side'>$d</td>";
    for($j=1; $j<=8; $j++) {
        $d = $tableData["data$j"][$i];
        if(!empty($d))
            $HTML_table .= "<td>$d</td>";
    }
    $HTML_table .= "</tr>";
}
$HTML_table .= "</table>";
?>

In HTML, the <th> is conceptually used for header cells, not the starting cell of a row, so I've also changed them in the code and of course in the <style> :

<style>
    table {} 
    table th.top1 { padding: 10px; background-color: red;color: white}
    table th.top2 { padding: 10px; background-color: blue; color: white}
    table td.side { padding: 10px; background-color: green; color: white}
    table td { padding: 10px;  border-bottom:1px solid #ededed; text-align:center;}
</style>

To get the result printed, simple do echo $HTML_table; anywhere you want to :)