How to make HTML table use PHP array

Question

I want make HTML table use PHP Array.

This is PHP side code

function get_location_list()
{
    global $connect;

    $query = "select location
                  , SUBSTRING_INDEX(SUBSTRING_INDEX(location,'-',1),'-',-1) loc_a
                  , SUBSTRING_INDEX(SUBSTRING_INDEX(location,'-',2),'-',-1) loc_b
                  , SUBSTRING_INDEX(SUBSTRING_INDEX(location,'-',3),'-',-1) loc_c
               from stock_location
               where location> ''
           order by loc_a, loc_b * 1, loc_c * 1 limit 100";
    $result = mysql_query($query, $connect);
    $arr_result = array();

    while( $data = mysql_fetch_array( $result ) )
    {
        $arr_result[$data[loc_a]][] = $data[location];
    }

    echo json_encode( $arr_result );
}

This code send Array to HTML side. Array value is same like this

"A1":["A1-1","A1-1-1","A1-1-2","A1-1-3","A1-1-4","A1-2-1","A1-2","A1-2-
2","A1-2-3","A1-2-4","A1-3-1","A1-3-2","A1-3","A1-3-3","A1-3-4","A1-4-
1","A1-4-2","A1-4-3","A1-4-4","A1-4","A1-5-1","A1-5-2","A1-5-3","A1-5-
4","A1-5"],
"A2":["A2-1","A2-1-1","A2-1-2","A2-1-3","A2-1-4","A2-2-1","A2-
2","A2-2-2","A2-2-3","A2-2-4","A2-3-1","A2-3-2","A2-3-3","A2-3","A2-3-
4","A2-4-1","A2-4-2","A2-4-3","A2-4","A2-4-4","A2-5-1","A2-5-2","A2-5-
3","A2-5-4","A2-5"],
"A3":["A3-1","A3-1-1","A3-1-2","A3-1-3","A3-1-4","A3-2-
1","A3-2","A3-2-2","A3-2-3","A3-2-4","A3-3-1","A3-3-2","A3-3-3","A3-3","A3-
3-4","A3-4-1","A3-4-2","A3-4-3","A3-4","A3-4-4","A3-5-1","A3-5-2","A3-5-
3","A3-5-4","A3-5"],
"A4":["A4-1","A4-1-1","A4-1-2","A4-1-3","A4-1-4","A4-2-
1","A4-2","A4-2-2","A4-2-3","A4-2-4","A4-3-1","A4-3-2","A4-3-3","A4-3","A4-
3-4","A4-4-1","A4-4-2","A4-4-3","A4-4","A4-4-4","A4-5-1","A4-5-2","A4-5-
3","A4-5-4","A4-5"]

this is HTML side.different file,not same file with PHP

  <table class="table table-bordered">
      <thead>
        <tr>
            <th class="header_center" width=100>location</th>
            <th class="header_center" width=100>product</th>
            <th class="header_center" width=100>qty</th>
        </tr>
      </thead>

      <tbody id="table_contents">
      </tbody>
    </table>

and this is javascript. javascript code in same file with HTML

    $.post("function.htm", { 
        template   : "IU00", 
        action     : "get_location_list",
    },

    function( response ){ 

         $("#table_contents").empty();

            obj = eval( "(" + response + ")" )

            for( var i=0; i < obj.length; i++ )
            {
                str = "<tr>";
                str += "<td>" + obj[i].location + "</td>";
                str += "<td>" + "</td>";
                str += "<td>" + "</td>";
                str += "</tr>";

                $("#table_contents").append(str);
            } 


    });

I want show HTML table like this.

  __________ __________ __________ __________
 |location 1|location 2|location 3|location 4|
 |  A1-1-1  |  A2-1-1  |  A3-1-1  |  A4-1-1  |
 |  A1-1-2  |  A2-1-2  |  A3-1-2  |  A4-1-2  |
 |  A1-1-3  |  A2-1-3  |  A3-1-3  |  A4-1-3  |
 |  A1-1-4  |  A2-1-4  |  A3-1-4  |  A4-1-4  |
 |  A1-2-1  |  A2-2-1  |  A3-2-1  |  A4-2-1  |
 |  A1-2-2  |  A2-2-2  |  A3-2-2  |  A4-2-2  |
       .         .           .          .
       .         .           .          .
 |  A1-5-5  |  A2-5-5  |  A3-5-5  |  A4-5-5  |
 ---------------------------------------------

I am unsure whether the issue is with the Javascript or HTML code. What changes are required to display the table in the format shown above?

Why you need to send the json? why don't just send the HTML output from PHP instead of parsing it in JavaScript? Just trying to understand, as you are not using any JS framework and doing it manually then PHP will have better control. — Danish Hakim Khan
– Danish Hakim Khan, Commented Jan 23, 2018 at 12:43
Danish Hakim Khan makes a good suggestion, there is really no need for JS / JQuery here. Furthermore you are using the deprecated mysql database commands. Use mysqli php.net/manual/en/book.mysqli.php (or PDO). — dading84
– dading84, Commented Jan 23, 2018 at 13:54

Theophilus Omoregbee · Accepted Answer · 2018-01-23 14:12:00Z

// Code goes here
 /**
  * https://stackoverflow.com/questions/48401981/how-to-make-html-table-use-php-array#
  */ 
var response ="";
var table_header = $('#table_header');
var table_body = $('#table_body');

function processResponse(resp){
  resp = {'A1':['A1-1','A1-2','A1-3'], 'A2':['A2-1','A2-2','A2-3','A2-4']};
 
 // work on the table header
  var columns ="";
  var columnNames = Object.keys(resp);
  var maxRow = 0; // so we know which key has the longest row
  for(var col=0; col < columnNames.length; col++){
    columns += '<th class="header_center" width=100>'+columnNames[col]+'</th>';
    
    if(maxRow < resp[columnNames[col]].length ){
      maxRow = resp[columnNames[col]].length;
    }
  } 
  table_header.html(columns);
  
  // lets work on the table row based on the longest row
  var rows = [];
  for(var i=0; i< maxRow; i++){
    var single_row = [];
    // loop through the columns
    for (var col=0; col < columnNames.length; col++){
      var value = resp[columnNames[col]];
      single_row.push(value[i]);
    }
    rows.push(single_row); // row created
  }

// now update our table with it 
table_body.html("");
  for(var row=0; row<rows.length; row++){
    var tr = "<tr>";
    // now td
    for(var col=0; col<rows[row].length; col++){
      tr +="<td>"+rows[row][col]+"</td>";
    }
    
    tr +="</tr>";
    
    table_body.append(tr);
  } 
  
}


$("#process").click (function(e){
  processResponse();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <table class="table table-bordered">
      <thead>
        <tr id="table_header">
            
        </tr>
      </thead>

      <tbody id="table_body">
      </tbody>
    </table>
    
    <button id="process">Process record</button>

You can update the response to follow the returned one from your server. Your server can perform most of the action. If you check how the rows were generated you can move that process to your server and just do a double iteration of rows to columns

Collectives™ on Stack Overflow

How to make HTML table use PHP array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related