如何将数据显示到数据表中（将json对象转换为对象）答案

【问题标题】：how to display data into datatable (json object into object)如何将数据显示到数据表中（将json对象转换为对象）
【发布时间】：2021-12-23 08:41:13
【问题描述】：

这是我想在数据表中显示余额的格式。我没有找到任何解决这个问题的方法 { “信息”：{ "makerCommission": "10", "takerCommission": "10", "buyerCommission": "0", "sellerCommission": "0", “canTrade”：是的， “canWithdraw”：是的， “canDeposit”：是的， "updateTime": "1639767562245", "accountType": "SPOT", “余额”：[ { “资产”：“比特币”， “免费”：0.00000371， “锁定”：0.00000000 }, { “资产”：“LTC”， “免费”：0.00000769， “锁定”：0.00000000 } }

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Comment</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- <link rel="stylesheet" type="text/css" href="style.css"> -->
    
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
    <!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>


<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

  <div class="main-body">
    <header>
      
        

    <div id="main">
        <table id="table_id" cellspacing="0" width="100%">
            <thead>
                <tr class="bg-dark">
                    <th class="grey">data</th>
                  
                </tr>
            </thead>
        </table>
    </div>
  </div>    
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.css">
  
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.js"></script>
    
    
    <script>
        $(document).ready(function(){
                $('#table_id').DataTable( {
                    ajax: {
                        // url: 'https://jsonplaceholder.typicode.com/comments',
                        url: 'http://design.trailingcrypto.com/api/trade/balances?exchange=binance',
                        dataSrc: ''
                    },
                    // console.log(data);
                    columns: [
                            { data: 'info.balances'},
                        ]
            });
        })
    </script>
</body>
</html>

【问题讨论】：

标签： javascript json ajax object datatable

【解决方案1】：

dataSrc 定义要从数据源对象（即 Ajax 请求返回的对象）读取的属性。

通过列中的data属性，您可以定义目标对象的哪个属性必须放在表格单元格中。

所以你可以像这样初始化你的 tbale：

$('#table_id').DataTable({
    ajax: {
        url: 'http://design.trailingcrypto.com/api/trade/balances?exchange=binance',
        dataSrc: 'info.balances'
    },
    columns: [
            { data: 'asset'},
        ]
});

【讨论】：