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

Posted 2023-03-14

【中文标题】将 JSON 字符串转换为对象并显示为 HTML 表格

【英文标题】：Convert JSON string to object and display as HTML table

【发布时间】：2019-12-22 10:29:08

【问题描述】：

我有一个dropdown select option 和onchange event，它将通过AJAX 将选定的值发送到我的控制器，然后根据mysql 数据库中的选定值查询数据并将其作为JSON 对象返回给我的刀片。

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

假设是这样的过程

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

将 JSON 插入 MySQL 数据库的控制器代码

$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 的控制器代码

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, thborder: 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));
       
   );            
);

控制台

输出

我想要的输出

【问题讨论】：

winPrint.document.write(JSON.stringify(data)); 实际上只是将 JSON 字符串转储到浏览器。 JSON 对象是 data 仍然是一个 JSON 对象，不管它是一行还是多行。响应 JSON 的服务器会将其压缩为一行以节省带宽。您需要将 JSON 解析为表格。

***.com/a/17785623/10634638

【参考方案1】：

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

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

【讨论】：

我不使用模型