Print a html table with transposed data from a multidimensional array-CodePudding

What would be the best way to print an HTML table with an array of arrays in php? Each array key would be the head of the table, and the sub-array items the table cells.

arr = [
    key_1 -> 
        - key_1_val_1
        - key_1_val_2
        - key_1_val_3
        
    key_2 -> 
        - key_2_val_1
        - key_2_val_2
        - key_2_val_3
]

Expected output:

<table>
    <tr>
        <td>key_1</td>
        <td>key_2</td>
    </tr>
    <tr>
        <td>key_1_val_1</td>
        <td>key_2_val_1</td>
    </tr>
    ...
</table>

Any idea? Tnx

Not success:

<table>
   <thead>
   <tr>
      <?php foreach ( array_keys( $get_cards ) as $head ): ?>
         <th><?php esc_html_e( get_the_title( $head ) ); ?></th>
      <?php endforeach; ?>
   </tr>
   </thead>
   <tbody>
   <tr>
      <?php foreach ( $get_cards as $cols ): ?>
         <?php $row_end = count( $get_cards ); ?>
         <?php $colum_end = count( $cols ); ?>
         <?php $count_rows   ; ?>
         <?php foreach ( $cols as $col ): ?>
            <?php $count_columns   ; ?>
            <td>1</td>
         <?php endforeach; ?>

         <?php if ( $count_rows % 2 === 0 ): ?>
         <?php endif; ?>

         <?php $count_columns = 0; ?>
      <?php endforeach; ?>
      <?php $count_rows = 0; ?>
   </tr>
   </tbody>
</table>

Solved. This is my solution: https://gist.github.com/angelorocha/bdd10af73d047709553ef225500fe993

CodePudding user response：

The code of your project is to create a new array for creating a comparative table. We can do it by manipulating index in your case. This is the main logic for creating a new array.

<?php 
      $i = 0;
      $arr = [];
      foreach ( $age as $cols ): ?>
         <?php 
         $j = 0;
         foreach ( $cols as $vals ):
         
         $arr[$j][$i] = $vals;
         
         $j  ;
         endforeach;
         $i  ;
         ?>

this is the full code.

<!DOCTYPE html>
<html>
<body>
<?php
$age = [
   "No"=>["35", "24", "60"], 
   "Owner"=>["Peter", "John", "David"], 
   "Location"=>["Hong Kong", "New York", "Los Angeles"]
   ];
?>
<table>
   <thead>
   <tr>
      <?php 
      
      foreach ( $age as $key=>$value ): ?>
         <th><?php echo $key; ?></th>
      <?php endforeach; ?>
   </tr>
   </thead>
   <tbody>
   <tr>
      <?php 
      $i = 0;
      $arr = [];
      foreach ( $age as $cols ): ?>
         <?php 
         $j = 0;
         foreach ( $cols as $vals ):
         
         $arr[$j][$i] = $vals;
         
         $j  ;
         endforeach;
         $i  ;
         ?>
         
      <?php endforeach; 
      foreach($arr as $cols):
        echo "<tr>";
        foreach($cols as $val):
          echo "<td>".$val."</td>";
        endforeach;
        echo "</tr>";
      endforeach;
      ?>
   </tr>
   </tbody>
</table>

</body>
</html>

CodePudding user response：

Use a set of nested loops to transpose the multidimensional array data (as well as transferring the first level keys as the new first row of data).

Then use a basic loop to print the rows as html. The way implode() is used, it won't matter if the number of columns changes -- it will create as many columns as are needed.

Code: (Demo)

$arr = [
    'key_1' => ['A', 'B', 'C'],
    'key_2' => ['D', 'E', 'F'],
];

$transpose = [];
foreach ($arr as $k => $row) {
    $transpose[0][] = $k;
    foreach ($row as $i => $v) {
        $transpose[$i   1][] = $v;
    }
}

echo "<table border=1>\n";
foreach ($transpose as $values) {
    echo "<tr><td>" . implode('</td><td>', $values) . "</td></tr>\n";
}
echo '</table>';