javascript - 将 JSON 字符串转换为对象并显示为 HTML 表格

Question

我有一个带有 onchange 事件 的下拉选择选项，它将通过 AJAX 将选定的值发送到我的 Controller ，然后根据从 MySQL 数据库中选择值并将其作为 JSON 对象返回到我的 Blade 服务器。

我的问题是来自 mysql 数据库的 JSON 数据当前在字符串中作为单行。如何将其转换回普通的 JSON 对象并根据列名将每个值显示为新窗口中的 HTML 表。

假设是这样的过程

1. 从下拉选项中选择日期。
2. 根据所选日期从数据库中获取数据。
3. 将 JSON 字符串转换为对象并将其返回给 Blade 。
4. 在新窗口中将数据显示为 HTML 表格。

用于将 JSON 插入 MySQL 数据库的 Controller 代码

$sqlquery = DB::connection('sqlsrv')
                ->table('Stocks')
                ->join('StockTransactions', 'Stocks.Id', '=', 'StockTransactions.StockId')
                ->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")
                    )
                ->where([
                    ['UOMQty', '>', '0'],
                    ['DocumentCode', 'NOT LIKE', 'SA%'],
                    ['DocumentCode', 'NOT LIKE', 'SIN%']
                ])
                ->WhereBetween('TransactionDate', ['01-01-2000', $dateto])
                ->groupBy('StockName', 'TransactionDate', 'CurrentBalance', 'DocumentCode', 'DocType')
                ->orderBy('TransactionDate', 'ASC')
                ->get();

$array = json_decode(json_encode($sqlquery), true);
$json  = json_encode($array);

 DB::connection('mysql')
     ->table('records')
     ->insert(['record' => $json, 'date_from' => "2000-01-01", 'date_to' => "$dateto", 'date_inquiry' => "$getCurrentDateTimeTo"]);

从 MySQL 数据库获取 JSON 的 Controller 代码

public function getmysqldata(Request $request)
{
  $request_data = $request->all();
  $dateInquiry = $request_data['dateInquiry'];

  $result = DB::connection('mysql')
                ->table('records')
                ->where([
                  'date_inquiry' => "$dateInquiry"
                ]) 
                ->get();

  return response()->json($result);
}

Index.blade.php

Record Available :                             
<select name="recordavailable" id="recordavailable">
  @if(!empty($inquiry_date))
    <option value="">Please select records</option> 
    @foreach ($inquiry_date as $date_inquiry)
      <option value="{{ $date_inquiry->date_inquiry}}">{{ $date_inquiry->date_inquiry}}</option>
    @endforeach  
  @else 
    option value="">No records</option>                
  @endif                                  
</select>

脚本

$(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('<title>Display Record of '+dateInquiry+'</title><style>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;}</style><h3>'+dateInquiry+'</h3>'); 

         winPrint.document.write(JSON.stringify(data));
      } 
   });            
});

控制台

输出

我想要的输出

Answer 1

您需要将记录表中的记录列转换为数组，这将在输出中将其转换为正确的 json。

https://laravel.com/docs/5.8/eloquent-mutators#array-and-json-casting