title: Convert JSON string to object and display as HTML table
body: <p>I have a <code>dropdown select option</code> with <code>onchange event</code> which will send selected value via <code>AJAX</code> to my controller and then query data based on the selected value from MySQL database and return it as <code>JSON</code> object to my blade. </p>
  
  <p>My problem is the <code>JSON</code> data from mysql database currently in string as a single row. How to convert it back into normal <code>JSON</code> object and display each value based on the column name as <code>HTML</code> table in a new window.</p>
  
  <p><strong>Process that suppose to be like this</strong></p>
  
  <ol>
  <li>Select date from the dropdown option.</li>
  <li>Get data from database based on date selected.</li>
  <li>Convert JSON string to object and return it to the blade.</li>
  <li>Display the data as HTML table on new window.</li>
  </ol>
  
  <p><strong>Controller Code for inserting JSON to MySQL database</strong></p>
  
  <pre><code>$sqlquery = DB::connection('sqlsrv')
                  -&gt;table('Stocks')
                  -&gt;join('StockTransactions', 'Stocks.Id', '=', 'StockTransactions.StockId')
                  -&gt;select(
                     'TransactionDate',
                     'DocumentCode',
                     'DocType',
                     'StockName',
                     DB::raw("FORMAT(SUM(UOMQty), 'N') AS TotalUOMQty"),
                     DB::raw("FORMAT(SUM(UOMPrice), 'N') AS TotalUOMPrice"),
                     DB::raw("FORMAT(CurrentBalance, 'N') AS CurrentBalance"),
                     DB::raw("FORMAT(((SUM(UOMPrice) / SUM(UOMQty)) * CurrentBalance), 'N') AS Total")
                      )
                  -&gt;where([
                      ['UOMQty', '&gt;', '0'],
                      ['DocumentCode', 'NOT LIKE', 'SA%'],
                      ['DocumentCode', 'NOT LIKE', 'SIN%']
                  ])
                  -&gt;WhereBetween('TransactionDate', ['01-01-2000', $dateto])
                  -&gt;groupBy('StockName', 'TransactionDate', 'CurrentBalance', 'DocumentCode', 'DocType')
                  -&gt;orderBy('TransactionDate', 'ASC')
                  -&gt;get();
  
  $array = json_decode(json_encode($sqlquery), true);
  $json  = json_encode($array);
  
   DB::connection('mysql')
       -&gt;table('records')
       -&gt;insert(['record' =&gt; $json, 'date_from' =&gt; "2000-01-01", 'date_to' =&gt; "$dateto", 'date_inquiry' =&gt; "$getCurrentDateTimeTo"]);
  </code></pre>
  
  <p><strong>Controllor Code for getting JSON from MySQL database</strong></p>
  
  <pre><code>public function getmysqldata(Request $request)
  {
    $request_data = $request-&gt;all();
    $dateInquiry = $request_data['dateInquiry'];
  
    $result = DB::connection('mysql')
                  -&gt;table('records')
                  -&gt;where([
                    'date_inquiry' =&gt; "$dateInquiry"
                  ]) 
                  -&gt;get();
  
    return response()-&gt;json($result);
  }
  </code></pre>
  
  <p><strong>Index.blade.php</strong></p>
  
  <pre><code>Record Available :                             
  &lt;select name="recordavailable" id="recordavailable"&gt;
    @if(!empty($inquiry_date))
      &lt;option value=""&gt;Please select records&lt;/option&gt; 
      @foreach ($inquiry_date as $date_inquiry)
        &lt;option value="{{ $date_inquiry-&gt;date_inquiry}}"&gt;{{ $date_inquiry-&gt;date_inquiry}}&lt;/option&gt;
      @endforeach  
    @else 
      option value=""&gt;No records&lt;/option&gt;                
    @endif                                  
  &lt;/select&gt;
  </code></pre>
  
  <p><strong>Scripts</strong></p>
  
  <pre><code>$(document).on("change", 'select#recordavailable', function(e) 
  {
     var dateInquiry = $(this).val();
     $.ajax
     ({
        type: "GET",               
        data: 'dateInquiry='+dateInquiry,               
        url: 'getmysqldata',
        dataType: 'JSON',                
        success: function(data) 
        { 
           var randomnumber = Math.floor((Math.random()*100)+1); 
  
           var winPrint = window.open('',"",'PopUp'+randomnumber+', "scrollbars=1,menubar=0,resizable=1"');
  
           winPrint.document.write('&lt;title&gt;Display Record of '+dateInquiry+'&lt;/title&gt;&lt;style&gt;table{ border-collapse: collapse;border-spacing: 0;'+
                              'width: 100%;border: 1px solid #ddd;}table, td, th{border: 1px solid black;text-align:center;padding: 5px;}#stockname {text-align: left;}'+
                              'h3 {text-align:center;}#qty, #cost, #balance, #total {text-align: right;}&lt;/style&gt;&lt;h3&gt;'+dateInquiry+'&lt;/h3&gt;'); 
  
           winPrint.document.write(JSON.stringify(data));
        } 
     });            
  });
  </code></pre>
  
  <p><strong>Console</strong></p>
  
  <p><a href="https://i.stack.imgur.com/bh7Q1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bh7Q1.png" alt="console"></a></p>
  
  <p><strong>Output</strong></p>
  
  <p><a href="https://i.stack.imgur.com/Q0QBv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Q0QBv.png" alt="Output"></a></p>
  
  <p><strong>The Output I want it to be</strong></p>
  
  <p><a href="https://i.stack.imgur.com/45N1l.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/45N1l.png" alt="expectedoutput"></a></p>