Ajax shows json data in array

Question

I have some MySQL datas in a table and each row has a button. If I click on the button, a bootstrap modal appears with that datas. I convert the MySQL datas to json. The .view_data is the button for each row. How can I post the id to data.php and get the json to the table in modal? I'm trying to solve this, but I'm new in JavaScript and I can't solve this problem.

It actually Works, but if I open one of the modal, the datas are shown in array:

I have some MySQL datas in a table and each row has a button. If I click on the button, a bootstrap modal appears with that datas. I convert the MySQL datas to json. The .view_data is the button for each row. How can I post the id to data.php and get the json to the table in modal? I'm trying to solve this, but I'm new in JavaScript and I can't solve this problem. It actually Works, but if I open one of the modal, the datas are shown in array:

index.php

<div class="modal fade" id="dataModal" tabindex="-1" role="dialog" aria-labelledby="basicModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel"></h4>
      </div>
      <div class="modal-body" id="moreInfo">
        <div class="table-responsive">  

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
</div>

        <script>
            $(document).ready(function(){
                $('.view_data').click(function(){  
                    var data_id = $(this).attr("id");  
                    $.ajax({  
                        url:"data.php",
                        method:"post",  
                        data:{data_id:data_id},  
                        success:function(data){  
                            $('#moreInfo').html(data);  
                            $('#dataModal').modal("show");  
                        }  
                    });  
                });

                $.ajax({
        url: 'data.php',
        type: 'get',
        dataType: 'JSON',
        success: function(response){
            var len = response.length;
            for(var i=0; i<len; i++){
                var id = response[i].id;
                var table1 = response[i].table1;
                var table2 = response[i].table2;
                var conn = response[i].conn;

                var tr_str = "<tr>" +

                    "<td align='center'>" + table1 + "</td>" +
                    "<td align='center'>" + table2 + "</td>" +
                    "<td align='center'>" + conn + "</td>" +
                    "</tr>";

                $("#userTable").append(tr_str);
            }

        }
    });
});

        </script>

data.php

$id=$_POST["data_id"];

    echo $html = '<table id="userTable" class="table table-bordered"><tr>  
                    <td align="center"><label><b>Data</b></label></td>  
                    <td align="center"><label><b>Connect to</b></label></td>  
                    <td align="center"><label><b>Description</b></label></td>
                </tr> 
                </table></div>';

    if ($conn){
    if(isset($id)) { 
    $sql=$conn->prepare("SELECT table1.table1_id AS id1, table1.data AS table1,
                                GROUP_CONCAT(DISTINCT(table2.data) SEPARATOR ', ') AS table2,
                                GROUP_CONCAT(DISTINCT(table1_table2.connection) SEPARATOR ', ') AS conn
                                FROM table1
                                LEFT JOIN table1_table2 ON table1.table1_id = table1_table2.table1_id
                                LEFT JOIN table2 ON table2.table2_id = table1_table2.table2_id
                                WHERE table1.table1_id=?
                                GROUP BY table1.table1_id");

            $sql -> bind_param('i', $id);
            $sql -> execute();
            $result = $sql -> get_result();
            $sql -> close();

            while($row= mysqli_fetch_assoc($result)){
                $id = $row['id1'];
                $table1 = $row['table1'];
                $table2 = $row['table2'];
                $conn = $row['conn'];

                $return_arr[] = array("id" => $id,
                    "table1" => $table1,
                    "table2" => $table2,
                    "conn" => $conn);
            }
    }
            echo json_encode($return_arr);
    }

Answer 1

You could create a function that generate the HTML table and use it in the both requests callback :

$(document).ready(function(){
    $('.view_data').click(function(){  
        var data_id = $(this).attr("id");  
        $.ajax({  
            url:"data.php",
            method:"post",  
            data:{data_id:data_id},  
            success:function(data){
                generateTable(data, $('#moreInfo'));

                $('#dataModal').modal("show");  
            }  
        });  
    });

    $.ajax({
        url: 'data.php',
        type: 'get',
        dataType: 'JSON',
        success: function(response){
            generateTable(response, $("#userTable"));
        }
    });
});

function generateTable(response, table){
    var len = response.length;

    for(var i=0; i<len; i++){
        var id = response[i].id;
        var table1 = response[i].table1;
        var table2 = response[i].table2;
        var conn = response[i].conn;

        var tr_str = "<tr>" +

            "<td align='center'>" + table1 + "</td>" +
            "<td align='center'>" + table2 + "</td>" +
            "<td align='center'>" + conn + "</td>" +
            "</tr>";

        table.append(tr_str);
    }
}

Answer 2

This line might be a good place to start

$('#moreInfo').html(data);

Here, it looks like data is in JSON. However, $.html(something) doesn't automatically format the data into the table it looks like you're trying to create.

Here's the documentation on $.html(something). "Something" is expected to be an HTML string, not a JSON array

• http://api.jquery.com/html/

Try taking data , go through each element, and append td, tr, etc. to #moreInfo using other jQuery commands.

Some references

• Convert JSON array to an HTML table in jQuery
• Add table row in jQuery

Answer 3

It is very simple. you can send your complete table.

$.ajax({  
        url:"data.php",
        method:"post",  
        data:{data_id:data_id},  
        success:function(data){             
            var html_row ='';
            $.each(data, function(key, val){
              html_row += '<td>'+val.table1+'</td><td>'+val.table2+'</td><td>'+val.conn+'</td>';
             });
           var html_content = `<table id="userTable" class="table table-bordered"><tr>  
                   <td align="center"><label><b>Data</b></label></td>  
                   <td align="center"><label><b>Connect to</b></label></td>  
                   <td align="center"><label><b>Description</b></label></td>
               </tr>${html_row} 
               </table>`;    
            $('#moreInfo').html(html_content);  
            $('#dataModal').modal("show");  
        }  
    });