how to display data into datatable (json object into object)

Question

This is the format i want to display balance into datatables. i didn't find any solution for this problem { "info": { "makerCommission": "10", "takerCommission": "10", "buyerCommission": "0", "sellerCommission": "0", "canTrade": true, "canWithdraw": true, "canDeposit": true, "updateTime": "1639767562245", "accountType": "SPOT", "balances": [ { "asset": "BTC", "free": 0.00000371, "locked": 0.00000000 }, { "asset": "LTC", "free": 0.00000769, "locked": 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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>


<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

Saeed Shamloo · Accepted Answer · 2021-12-23 09:06:11Z

1

dataSrc defines the property from the data source object (i.e. that returned by the Ajax request) to read.

By data property in the columns, you can define which property of target object must be put in the table cell.

So you can initialize your tbale like this:

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

edited Dec 23, 2021 at 9:06

answered Dec 23, 2021 at 9:00

Saeed Shamloo

6,6021 gold badge11 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how to display data into datatable (json object into object)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related