Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Displaying a nested array in an HTML table

This is a simple problem that I've been trying to solve for several hours. I have an array containing information of several students and marks they scored in tests. There are 8 subjects in total, with each subject having 5 parameters.

The array looks like below:

Array
(
    [Ron] => Array
        (
            [subject1] => Array
                (
                    [test1] => 47
                    [test2] => 86
                    [total] => 133
                    [percentage] => 88.67
                    [status] => Pass
                )
            [pass_count] => 8
            [fail_count] => 0
            [gross_total] => 963
            [gross_percentage] => 80.25

            [...]

            [subject8] => Array
                (
                    [test1] => 48
                    [test2] => 86
                    [total] => 134
                    [percentage] => 89.33
                    [status] => Pass
                )

            [pass_count] => 8
            [fail_count] => 0
            [gross_total] => 900
            [gross_percentage] => 75.50
        )

    [John] => Array
        (
            [subject1] => Array
                (
                    [test1] => 39
                    [test2] => 72
                    [total] => 111
                    [percentage] => 74
                    [status] => Pass
                )
            [pass_count] => 8
            [fail_count] => 0
            [gross_total] => 963
            [gross_percentage] => 80.25

            [...]                

            [subject8] => Array
                (
                    [test1] => 39
                    [test2] => 75
                    [total] => 114
                    [percentage] => 76
                    [status] => Pass
                )

            [pass_count] => 8
            [fail_count] => 0
            [gross_total] => 846
            [gross_percentage] => 70.5
        )

)

I need to display the following in a nicely formatted HTML table (I'm planning to use Bootstrap), but I can't for the life of me figure out how to properly nest the table using PHP.

This is the HTML markup that I currently have: http://jsfiddle.net/9y910uvp/

This gives the following result:

Which is okay.

The Actual Problem

I'm using PHP to display the contents from the array. I'm confused how to display the values for the nested <tr> and <td> sections.

How do I loop through the array and display the contents correctly? (I'd post my attempts so far, but they're all stupid and not working so I'm not posting).

An example would be greatly appreciated because I've spent countless hours trying to get this working, but failed terribly.

like image 415
Joseph John Avatar asked May 02 '15 22:05

Joseph John


People also ask

How do I create a nested table within a table in HTML?

Tables can be nested together to create a table inside a table. To create a nested table, we need to create a table using the <table> tag. This table is known as the outer table. The second table that will be nested table is called the inner table.

How do I access nested array?

A nested data structure is an array or object which refers to other arrays or objects, i.e. its values are arrays or objects. Such structures can be accessed by consecutively applying dot or bracket notation. Here is an example: const data = { code: 42, items: [{ id: 1, name: 'foo' }, { id: 2, name: 'bar' }] };

How do I make a nested array?

Creating a Nested Array: This one is just equating the variable to the array. Second one is using the array method new Array() . And the last one is using the Array() which is similar to the new Array() . Note that all these methods yield the same result.

How do you define a nested array?

Nested Array in JavaScript is defined as Array (Outer array) within another array (inner array). An Array can have one or more inner Arrays. These nested array (inner arrays) are under the scope of outer array means we can access these inner array elements based on outer array object name.


2 Answers

Try this out

<table border="1">
    <thead>
    <thead>
        <tr>
            <th>Name</th>
            <th>Subject</th>
            <th>Test1 Marks</th>
            <th>Test2 Marks</th>
            <th>Total Marks</th>
            <th>Status</th>
            <th>Percentage</th>
            <th>Pass Count</th>      
            <th>Total Percentage</th>
        </tr>
    </thead>
    <tbody>

        </tr>
        <?php
        $numberOfSubjects = 3; //I used 3 subjects. You should change this to 8 for your data.
        foreach ($data as $student => $info) {
            echo "<tr><td rowspan=$numberOfSubjects />$student</td>";

            //flag to let the inner loop the tr has been drawn for the first row
            $firstRow = true;
            foreach ($info as $key => $value) {

                //we only want subject info
                if (strpos($key, "subject") === 0) {
                    if (!$firstRow) {
                        echo "<tr>";
                    } //else we already drew it

                    //its a subject so
                    echo "<td>$key</td>";
                    echo "<td>{$value['test1']}</td>";
                    echo "<td>{$value['test2']}</td>";
                    echo "<td>{$value['total']}</td>";
                    echo "<td>{$value['status']}</td>";
                    echo "<td>{$value['percentage']}</td>";

                    //only draw total for the first row
                    if ($firstRow) {
                        echo "<td rowspan=$numberOfSubjects>{$info['pass_count']}</td>";
                        echo "<td rowspan=$numberOfSubjects>{$info['gross_percentage']}</td>";
                    }
                    //close the row
                    echo "</tr>";
                    $firstRow = false;
                }
            }
        }
        ?>
    </tbody>
</table>

Here is the output:

enter image description here

Its based on a sample dataset I constructed from your description, included below for completeness:

<?php
$data = array(
    "Ron" => Array
        (
        "subject1" => Array
            (
            "test1" => 47
            , "test2" => 86
            , "total" => 133
            , "percentage" => 88.67
            , "status" => Pass
        )
        , "pass_count" => 8
        , "fail_count" => 0
        , "gross_total" => 963
        , "gross_percentage" => 80.25,
        "subject2" => Array
            (
            "test1" => 47
            , "test2" => 86
            , "total" => 133
            , "percentage" => 88.67
            , "status" => Pass
        )
        , "subject3" => Array
            (
            "test1" => 48
            , "test2" => 86
            , "total" => 134
            , "percentage" => 89.33
            , "status" => Pass
        )
        , "pass_count" => 8
        , "fail_count" => 0
        , "gross_total" => 900
        , "gross_percentage" => 75.50
    ),
    "John" => Array
        (
        "subject1" => Array
            (
            "test1" => 47
            , "test2" => 86
            , "total" => 133
            , "percentage" => 88.67
            , "status" => Pass
        )
        , "pass_count" => 8
        , "fail_count" => 0
        , "gross_total" => 963
        , "gross_percentage" => 80.25,
        "subject2" => Array
            (
            "test1" => 47
            , "test2" => 86
            , "total" => 133
            , "percentage" => 88.67
            , "status" => Pass
        )
        , "subject3" => Array
            (
            "test1" => 48
            , "test2" => 86
            , "total" => 134
            , "percentage" => 89.33
            , "status" => Pass
        )
        , "pass_count" => 8
        , "fail_count" => 0
        , "gross_total" => 963
        , "gross_percentage" => 80.25
    )
);
like image 44
chiliNUT Avatar answered Oct 04 '22 16:10

chiliNUT


Not quite the same output, but here's a recursive approach that should handle any depth of nested arrays...

<?php

$data = Array (
    "Ron" => Array (
            "subject1" => Array (
               "tests" => Array (
                    "test1" => 47,
                    "test2" => 86,
                    "total" => 133,
                    "percentage" => 88.67,
                    "status" => "Pass",
                ),
                "pass_count" => 8,
                "fail_count" => 0,
                "gross_total" => 963,
                "gross_percentage" => 80.25,
            ),


            "subject8" => Array (
               "tests" => Array (
                    "test1" => 48,
                    "test2" => 86,
                    "total" => 134,
                    "percentage" => 89.33,
                    "status" => "Pass",
                ),
                "pass_count" => 8,
                "fail_count" => 0,
                "gross_total" => 900,
                "gross_percentage" => 75.50,

             ),
    ),

    "John" => Array (
            "subject1" => Array (  
               "tests" => Array (
                    "test1" => 39,
                    "test2" => 72,
                    "total" => 111,
                    "percentage" => 74,
                    "status" => "Pass",
                ),
                "pass_count" => 8,
                "fail_count" => 0,
                "gross_total" => 963,
                "gross_percentage" => 80.25,

            ),

            "subject8" => Array (
                "tests" => Array (
                    "test1" => 39,
                    "test2" => 75,
                    "total" => 114,
                    "percentage" => 76,
                    "status" => "Pass",

                ),
                "pass_count" => 8,
                "fail_count" => 0,
                "gross_total" => 846,
                "gross_percentage" => 70.5,
            ),
        ),
);


print_r($data);
$table = table_cell($data);
echo $table;


function table_cell($data) {

  $return = "<table border='1'>";
  foreach ($data as $key => $value) {
    $return .= "<tr><td>$key</td><td>";
    if (is_array($value)) {
        $return .= table_cell($value);
    } else {
        $return .= $value;
    }
    $return .= "</td><tr>";
  }
  $return .= "</tr></table>";
  return($return);

}

and the table looks nothing like the requested but... it was an interesting excersize...

table output

like image 66
dbinns66 Avatar answered Oct 04 '22 15:10

dbinns66