effectively showcasing information in a datatable by converting JSON data into objects

I am looking for a way to display balance information in datatables, but I have not been able to find a solution yet.

<!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" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
    
<link href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

<link href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/jquery/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: 'http://design.trailingcrypto.com/api/trade/balances?exchange=binance',
                        dataSrc: ''
                    },
                    columns: [
                            { data: 'info.balances'},
                        ]
            });
        })
    </script>
</body>
</html>
javascriptjsonajaxobjectdatatable

Answer №1

dataSrc attribute specifies the property within the data source object (e.g. the one returned by an Ajax request) to be read.

Using the data property in the columns, you can specify which property of the target object should be displayed in the table cell.

For example, you can set up your table like this:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular Js powered admin control panel

Explore the SB Admin Angular by Start Angular My current project involves setting up an admin dashboard on a Windows system. However, I have encountered some issues during the installation process using npm install An error message can be found here ...

javascriptangularjsnode.jsnpmnpm-install

Searching for a different method in JavaScript that can add items without duplication, as the prependTo function tends to insert multiple items

Every time my code runs successfully, a success message is generated and displayed using prependTo within the HTML. However, the issue arises when the user performs the successful action twice, resulting in two success messages being shown on the screen. ...

javascriptjquery

Splitting a string in Typescript based on regex group that identifies digits from the end

Looking to separate a string in a specific format - text = "a bunch of words 22 minutes ago some additional text". Only interested in the portion before the digits, like "a bunch of words". The string may contain 'minute', & ...

javascriptregexstringtypescriptsplit

From Android JSON array to a list of items

In my android app, I have encountered an issue while trying to parse a JSONArray into an ArrayList. The PHP script returns the expected results correctly, but when attempting to add the results to the ArrayList in Java, a null pointer exception occurs at ...

javaandroidjsonarraylistarrays

What is the standard practice in AJAX for determining a specific state during page loading?

Since I started diving into the world of serious ajax operations, one question has been on my mind. Let me illustrate with an example. Imagine fetching a standard HTML page for a customer from the server. The URL could look like this: /myapp/customer/54 ...

javascriptajaxparameterssession-statestate

Any ideas on how to format a date for jQuery Datepicker?

Currently, I have implemented two different datepickers on my website, but I am interested in switching to jQuery's Datepicker for a more unified solution. Here is the current format that I am sending to our backend API: However, I would prefer to i ...

javascriptjqueryjquery-uidatepicker

JSON loading error detected in the system's background operation

I created a JSON loader class to load JSON objects from a URL. However, when I run it, I encounter some system errors in the logcat. Surprisingly, the application does not force close despite these errors. I am unsure about where I went wrong. Additionally ...

javaandroidjson

Combining disparate arrays with serialized name/value pairs

Is there a way to merge an unassociated array with serialized name/value pairs without manually iterating over them? //First, I select certain values from mytable var data = $('#mytable input:checked'); console.log(data); //Object[input attribu ...

javascriptjquery

Can you please guide me on how to convert pug (jade) to html using npm scripts?

Struggling to construct my package.json file, I find myself facing a challenge when it comes to writing scripts. "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build-css":"node-sass --output-style compressed -o bu ...

javascriptnode.jsnpmpug

Dispatching $emit / $broadcast events from multiple areas of the code and capturing them in a single location

I have a practice of sending $emits (or $broadcasts) from various parts of the code and different controllers, but intercepting them all from one centralized place. While this approach seems to be functioning properly, I am unsure if it may be considered b ...

javascriptangularjs

Error: Unable to locate module: Material-UI - Please check the path and try again

Encountering this error: Error message: Failed to compile ./node_modules/@material-ui/core/Modal/Modal.js Module not found: Can't resolve '@babel/runtime/helpers/builtin/assertThisInitialized' in 'C:\Users\rifat\ ...

javascriptreactjsmaterial-ui

Loading AJAX content within the existing page instead of a pop-up window

My goal is to have the page links load in a popup, but after adding this script, the page loads at the bottom instead. How can I make it open in a popup window instead? $('a[rel="ajax:jmodal"]').click(function(event) { $.ajax({ url: $(this).a ...

phphtmlajax

Customize the position of the Datetimepicker

Is there a way to customize the position of the datetimepicker, ensuring that it stays within the visual boundaries without getting cut off? I need help with this. ...

javascriptjqueryjquery-uidatepickerdatetimepicker

Troubleshooting module import errors in Python 3: Dealing with AttributeError

Recently, I have been working on a script that utilizes the json and requests modules. However, after transitioning from experimenting in the interactive shell to actually creating a file for my code, everything seemed to fall apart. The presence of a pyca ...

pythonjsonpython-3.xattributeerror

Implement the useEffect() function to handle the loading of external JavaScript on the client-side, replicating the

I have encountered a challenge while trying to integrate a rich text editor into my NextJS project. Since there are no available React components for this specific editor and it operates solely on the client side, I am required to load the necessary JavaSc ...

javascriptreactjsnext.js

Utilize Puppeteer for Web Scraping to Extract Products with an Array of Images

I am currently developing my portfolio by working on a variety of small projects, with my current focus on web scraping. Using Puppeteer, I have successfully scraped basic test websites. However, my goal now is to tackle more advanced challenges, such as ...

javascriptnode.jsweb-scrapingpuppeteercheerio

Issue: The specific module is unable to be located, specifically on the Heroku platform

While my application performs well locally and on a Travis CI build server, it encounters issues when deployed on Heroku. The error message Error: Cannot find module is displayed, leading to app crashes. Here are some details about the npm module: It r ...

javascriptnode.jsherokunpm

AngularJS encountered an unidentified provider: $routeProviderProvider

I've hit a roadblock with an unfamiliar provider error and can't seem to figure out what I'm missing. Here's the setup: in main.js 'use strict'; angular.module('myApp') .controller('MainCtrl', ['n ...

javascriptangularjs

Axios delivers the index.html data to the front end of a React.js application

I’m currently in the process of developing a web application using React.js for the front-end and Flask for the back-end. I attempted to establish a connection between the two by defining a proxy server in React and enabling CORS in Flask. Everything was ...

javascriptpythonreactjsflaskaxios

Oh no! "The accuracy of your BMI calculation is in question."

I am currently working on a technical assessment for a BMI calculator, but I am facing a challenge in implementing the formula. The instructions for calculating BMI are as follows: Step 1: The user's height is given in feet, so it needs to be conver ...

javascriptes6-modules