title: Ajax shows json data in array
body: <p>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.</p>
  
  <p>It actually Works, but if I open one of the modal, the datas are shown in array:
  <a href="https://i.stack.imgur.com/OfGkN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OfGkN.png" alt="enter image description here"></a></p>
  
  <p>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:</p>
  
  <h2>index.php</h2>
  
  <pre><code>&lt;div class="modal fade" id="dataModal" tabindex="-1" role="dialog" aria-labelledby="basicModal"&gt;
    &lt;div class="modal-dialog"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
          &lt;h4 class="modal-title" id="myModalLabel"&gt;&lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class="modal-body" id="moreInfo"&gt;
          &lt;div class="table-responsive"&gt;  
  
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
          &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
          &lt;script&gt;
              $(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&lt;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 = "&lt;tr&gt;" +
  
                      "&lt;td align='center'&gt;" + table1 + "&lt;/td&gt;" +
                      "&lt;td align='center'&gt;" + table2 + "&lt;/td&gt;" +
                      "&lt;td align='center'&gt;" + conn + "&lt;/td&gt;" +
                      "&lt;/tr&gt;";
  
                  $("#userTable").append(tr_str);
              }
  
          }
      });
  });
  
          &lt;/script&gt;
  </code></pre>
  
  <h2>data.php</h2>
  
  <pre><code>$id=$_POST["data_id"];
  
      echo $html = '&lt;table id="userTable" class="table table-bordered"&gt;&lt;tr&gt;  
                      &lt;td align="center"&gt;&lt;label&gt;&lt;b&gt;Data&lt;/b&gt;&lt;/label&gt;&lt;/td&gt;  
                      &lt;td align="center"&gt;&lt;label&gt;&lt;b&gt;Connect to&lt;/b&gt;&lt;/label&gt;&lt;/td&gt;  
                      &lt;td align="center"&gt;&lt;label&gt;&lt;b&gt;Description&lt;/b&gt;&lt;/label&gt;&lt;/td&gt;
                  &lt;/tr&gt; 
                  &lt;/table&gt;&lt;/div&gt;';
  
      if ($conn){
      if(isset($id)) { 
      $sql=$conn-&gt;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 -&gt; bind_param('i', $id);
              $sql -&gt; execute();
              $result = $sql -&gt; get_result();
              $sql -&gt; close();
  
              while($row= mysqli_fetch_assoc($result)){
                  $id = $row['id1'];
                  $table1 = $row['table1'];
                  $table2 = $row['table2'];
                  $conn = $row['conn'];
  
                  $return_arr[] = array("id" =&gt; $id,
                      "table1" =&gt; $table1,
                      "table2" =&gt; $table2,
                      "conn" =&gt; $conn);
              }
      }
              echo json_encode($return_arr);
      }
  </code></pre>