title: PHP MySQL large data set with lots of time to display in angular component and small csv file exported from database
body: <p><strong>EDIT</strong> </p>
  
  <p>I selected only one field from all the query, the file size reduced to <code>433Kb</code> but the display time was 13 seconds.</p>
  
  <p><strong>END OF EDIT</strong></p>
  
  <p>I have the following query:</p>
  
  <pre><code>SELECT *,  DATE(h.hh_date_added) as dateOnly FROM unit u 
                      INNER JOIN househ h
                      ON u.unit_id=h.unit_id
                      LEFT JOIN location l
                      ON l.location_id_auto=u.location_id_auto
                      LEFT JOIN user us
                      ON us.user_id = h.user_id
                      ORDER BY dateOnly DESC
  </code></pre>
  
  <p>When running it on phpmyadmin, it is executed within 0.233 seconds returning 11331 row with nearly 20 fields.</p>
  
  <p>If I export the data into csv or excel, the size of it would be 830Kb.</p>
  
  <p>When returning this result using php to angular 6's <code>httpclient</code> service to display it in an angular material table:</p>
  
  <pre><code>getDataByType(){
      this.showSpinner=true;
      this.auth.getDataByType(this.dataType).subscribe(
        (data)=&gt;
        {
          console.log(data)
          this.dataSource = new MatTableDataSource(Object.values(data));
          this.dataSource.paginator = this.paginator;
          this.dataSource.sort=this.sort;
          this.showSpinner=false;
        },
        (error)=&gt;
        {
          console.log("Error: "+error)
        }
      )
  
  
    }
  </code></pre>
  
  <p>It would take more than 30 seconds (As displayed in the content-download time) to the data to be displayed in the table and shown to the user.</p>
  
  <p>The timing was displayed on the timing tab of google chrome network tab with a file size of <code>15.9 Mb</code>.</p>
  
  <p>Why the file size is so huge ? </p>
  
  <ol>
  <li>Is the problem from the material table that took too much time to display data after receiving them:</li>
  </ol>
  
  <p>I don't think so, as testing it on <code>postman</code> returned the same file size with different time of 20 seconds.</p>
  
  <ol start="2">
  <li>or because of a query error which is returning a huge data set:</li>
  </ol>
  
  <p>which I don't think so as on server computer, the result was returned within less than seconds with an excel file less than 1 Mb of size.</p>
  
  <ol start="3">
  <li>Is it because I am returning it as json encoded data and chrome is taking some time to handle it ?</li>
  </ol>
  
  <p>No, because I try to send the data within an array without the use of <code>json_encode</code> function and still giving the same size even bigger (17Mb).</p>
  
  <p>So is it local area network/router problem making the download time huge or other thing ?</p>
  
  <p>Please refer to <a href="https://stackoverflow.com/questions/53153459/php-and-wampserver-loading-data-on-users-computer-using-virtual-host-is-too-slow?noredirect=1">my previous question</a> on stack to check the connection scripts to the local server.</p>