title: Creating JavaScript object from MySQL DATABASE (ie multiple tables)
body: <p>Sorry to add another JavaScript object to the mix. I'm just having a little trouble wrapping my head around this as it is a little more complex than i have ever dealt with.</p>
  
  <p>Like the title states, i'm trying to create a JavaScript Object or perhaps a multidimensional array of a MySQL Database. For testing purposes i'm only using three tables from my database even though eventually it will store tens of tables. These tables are called "Interfaces", "IPAM", and "DNSF".</p>
  
  <p>The reason i would like to complete this task is that, i am trying to create a heavy ajax page which dynamically knows when tables are added, updated, deleted etc, and automatically reflects this without having to add more code. I am doing this by <strong>writing javascript with php</strong> in addition to various other ajax callbacks spitting out html and variables.</p>
  
  <p>Let me start out with my hardcoded HTML. All other html is created dynamically. This too will soon be created dynamically to add buttons to my website without adding code.</p>
  
  <pre><code>&lt;body&gt;
  &lt;div class = "form"&gt;
          &lt;button type="button" class = "formbutton" value = "Interfaces" onclick="inputChoice('Interfaces')"&gt;Interfaces&lt;/button&gt;
          &lt;button type="button" class = "formbutton" value = "IPAM" onclick="inputChoice('IPAM')"&gt;IPAM&lt;/button&gt;
          &lt;button type="button" class = "formbutton" value = "DNSR" onclick="inputChoice('DNSR')"&gt;DNSR&lt;/button&gt;           
      &lt;/div&gt;
      &lt;div class = "tableDiv" id="myTableDiv" style="height:1000px;width:1000px;border:1px solid #ccc; overflow: scroll;"&gt;&lt;table id = "myTable"&gt;&lt;/table&gt;&lt;/div&gt;    
  &lt;/body&gt;
  </code></pre>
  
  <p>Before any buttons or events are executed, the first thign my page does is issue ajax requests within a <code>$( document ).ready(function() {</code> function. My issue is that i have to code a seperate ajax request for every single table. I'll show an example here where i fetch interface table data: </p>
  
  <pre><code>$.ajax({
      url:"/ryan/nonEmber/ajax.php?table=Interfaces",
      beforeSend: function(XMLHttpRequest){},
      success: function(data, textStatus) {
          InterfacesCols = data.split(" ");
          InterfacesCols.pop();
          $.getJSON("/ryan/nonEmber/getJson.php?table=Interfaces", function( data ){
              var items = [];
              $.each(data.post, function(key, val){
                  items.push(val);
              });
              for(i = 0; i &lt; items.length; i++){
                  var myString = '&lt;tr id = "visibleRow"&gt;';
                  for(j = 0; j &lt; InterfacesCols.length; j++){
                      if(InterfacesCols[j] != null){
                          myString = myString + '&lt;td id = "visibleDef"&gt;' + items[i][InterfacesCols[j]] +'&lt;/td&gt;';
                      }
                  }
                  myString = myString + '&lt;/tr&gt;';
                  Interfaces.push(myString);
              }
          });
      }
  });
  </code></pre>
  
  <p>This ajax request ultimately creates an array of html strings that are used to create the table. Interfaces[] contains each html row. InterfacesCols contains the names of each column. I have to write this block of code for every single table. </p>
  
  <p><strong>What i want to do is put my "Interfaces[]" like arrays and "InterfacesCols[]" like arrays within a master array so that i can create a template and not have tons of the same code.</strong></p>
  
  <p>Lets call this master array <strong>tables</strong>. This would allow me to put my ajax in a for loop and loop through every table array rather than hardcode it. </p>
  
  <p><em>tables[0] would be interfaces[], tables[1] would be ipam etc.</em></p>
  
  <p>In addition to my ajax request blocks where i initially gather my data from the database. I also have my function "inputChoice(string)", where i actually generate a table from this data. I do so by changing inner html of my table. I dont wan't to have to redirect my page. This works fine, but once again i have to create a new block of code for every single table. These blocks of code are massive right now because they include garbage collection for the DOM and also the code for handling massive data sets(>10,000) without browser slow down. I will refrain from posting that block unless necessary. The ajax calls require the same thing.</p>
  
  <p>Here is the php where i originally create the empty array variables by generating javascript:</p>
  
  <pre><code>&lt;?php
  $sql=   "SELECT 
          TABLE_NAME
          FROM information_schema.TABLES 
          WHERE
          TABLE_TYPE='BASE TABLE'
          AND TABLE_SCHEMA='NJVCtestDB'";
  
  
  $stmt = $DBH-&gt;prepare($sql); 
  $stmt-&gt;setFetchMode(PDO::FETCH_ASSOC);  
  echo '&lt;script&gt;';    
  try{
      $stmt-&gt;execute();
      echo 'var tables = [];';
      while($row = $stmt-&gt;fetch()){
          echo 'var '.$row['TABLE_NAME'].' =[];';
          echo 'tables += '.$row['TABLE_NAME'].';';
          echo 'var '.$row['TABLE_NAME'].'Cols =[];';         
      }
      echo 'console.log(tables[1]);';
  }catch(PDOException $e){
      echo $e;
  }
  echo '&lt;/script&gt;';       
  ?&gt;
  </code></pre>
  
  <p>The above php is only called by using an  statement on my index. No Ajax.</p>
  
  <p>The link my ajax calls is this:</p>
  
  <pre><code>&lt;?
      $sql = "DESCRIBE ".$_GET['table'];      
      $stmt = $DBH-&gt;prepare($sql);  
      $stmt-&gt;setFetchMode(PDO::FETCH_ASSOC);
      $colnames;
          try{
              $stmt-&gt;execute();
              //$stmt2-&gt;execute();
              $colnames = $stmt-&gt;fetchAll(PDO::FETCH_COLUMN);
          }
          catch(PDOException $e){
              echo $e;         
          }
          foreach($colnames as $value){
              print $value ." ";
          }
  ?&gt;
  </code></pre>
  
  <p>The above ajax servers only the purpose of fetching column names and returning the names in a space delimeted string to be parsed and turned into an array via javascript, which you can see in my ajax call.</p>
  
  <p>My getJson ajax code is here: </p>
  
  <pre><code>&lt;?php
      include "connect.php";
          $sql = "DESCRIBE ".$_GET['table'];
          $stmt = $DBH-&gt;prepare($sql); 
          $stmt-&gt;setFetchMode(PDO::FETCH_ASSOC);
          $colnames;
          try{
              $stmt-&gt;execute();
              $colnames = $stmt-&gt;fetchAll(PDO::FETCH_COLUMN);
          }
          catch(PDOException $e){
              echo $e;         
          }       
          $sql = "SELECT * FROM ".$_GET['table']." LIMIT 17000";
          $stmt2 = $DBH-&gt;prepare($sql); 
          $stmt2-&gt;setFetchMode(PDO::FETCH_ASSOC);
          try{
              $stmt2-&gt;execute();          
              while($row = $stmt2-&gt;fetch()){
                  foreach($colnames as $value){
                      if($row[$value] == null){
                          $row[$value] = "";
                      }
                  }               
                  $row = array('id' =&gt; $i) + $row;                                
                  $items['post'][]=($row);
                  $i++;
              }
          }
          catch(PDOExcetipn $e){
              echo $e;
          }
          print json_encode($items);  
  ?&gt;
  </code></pre>
  
  <p>The above php seems slightly redundant to me as i fetch the column names again. However this time i also include the actual data. Line by line.</p>
  
  <p>This is basically all of my code i have written for this project. The only code i did not include was my javascript inputChoice() function. Which as i stated above is very bulky and really doesnt do anything the ajax doesnt do when it comes to utilizing the arrays. This is a massive post, so i apologize for the wall of text. I am not sure exactly what the next step is for me to code this better in the way i described. Any input would be very much appreciated!</p>