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

The performance of CasperJS when used with AngularJS is subpar

If I click on just one button in Casper, everything works perfectly. The code below passes the test. casper.then(function() { this.click('#loginB'); this.fill('#loginEmailField', { 'loginEmail': '<a ...

javascriptangularjscasperjs

React - the constructor binding issue with 'this' keyword

I am a beginner in React and I am learning through creating a simple test application. However, I am facing an issue with "this" binding. I set up this app package yesterday using "create-react-app", so all the necessary plugins including babel should be u ...

javascriptreactjs

The HTML content retrieved through an ajax service call may appear distorted momentarily until the JavaScript and CSS styles are fully applied

When making a service call using ajax and loading an HTML content on my page, the content includes text, external script calls, and CSS. However, upon loading, the HTML appears distorted for a few seconds before the JS and CSS are applied. Is there a sol ...

javascriptjqueryhtmlcssajax

Tips for implementing the new useState value in your code

Using DataGrid Material UI, I am facing an issue where the selected row is not being deleted when clicking on the delete button. The problem arises from setting the ID value in the useState hook and encountering asynchronous behavior in deleting the rows. ...

javascriptreactjsmaterial-uiuse-state

Cleaning up objects from memory in JavaScript following an AJAX request

I am developing a web application with dynamic content loading. In my code, I have a main container div (<div id="container"/>) where I use AJAX to load HTML content. // function overwritten by loadMenu functions // called before loading a new sect ...

javascriptperformancememory-leaks

Exploring unique forms with the turfjs polygon difference() function

While implementing the difference() function for my polygon map, I encountered a problem where unexpected shapes would appear or disappear when zooming in on the map. These shapes should not be there. The polygons involved are of type MultyPolygon and Poly ...

javascriptreactjsmapspolygonturfjs

The utcParse() function in D3.js might return a null value

I am struggling to parse a date format that appears as follows: 2017-02-18T09:00:00+06:00. Currently, I am attempting to use the following format for parsing: d3.utcParse("%Y-%m-%dT%H:%M:%S+%Z");, however, it is returning null. Do you have any suggesti ...

javascriptd3.jstime

Generate div elements corresponding to individual objects

Previously, I inquired about a similar issue but have not come across any solutions. I made updates to my code, which is now functioning well, however, I am facing a new dilemma. Here is the PHP code I am currently working with: class individual { pu ...

phphtmlclassobject

Facing a challenge with displaying an angularjs template within a popover

I am having trouble displaying custom HTML content in a popover when clicking on my "View" link. Although other content is rendering correctly, such as one with an ng-repeat inside it, my custom directive does not seem to be processed and displayed properl ...

javascriptangularjsangularjs-directiveangular-ui-bootstrap

Anticipated decoding of Array<Any> but discovered a dictionary instead, with no underlying error.)

I am encountering an issue: Expected to decode Array but found a dictionary instead. I am using Moya and the JSON structure is as follows: "buttons" : [ { "name" : "chat", "title" : "Сообщени ...

jsonswiftxcodedecodemoya

What is the best way to efficiently set up a scrolling text ticker for repeated use?

I am currently utilizing GreenSock/TweenMax for the creation of scrolling text, inspired by the design seen on this webpage: If you're interested in learning more about Greensock and its capabilities, take a look at their documentation here: While I ...

javascriptjquerygsap

Sending multiple values with the same key using jQuery AJAX

Is there an efficient method for constructing an ajax query like this using jquery? http://www.test.com/?value=happy&value=good&value=day I attempted $.getJSON('http://www.test.com/', {'value': ['happy','good&a ...

jqueryajax

Issue encountered: Unable to locate the file "SignInScreen" within the directory "./src/screens/authScreens" as referenced in the file "App.js"

App.js: import { StyleSheet, Text, View, StatusBar } from "react-native"; import { colors, parameters } from "./src/global/styles"; import SignInScreen from "./src/screens/authScreens/SignInScreen"; export default function A ...

javascripthtmlreactjsreact-nativefrontend

Message: Code=3840: "Character at index 0 is incorrect."

Currently, I am facing a challenge while developing an iOS app. I am encountering issues with user registration as I receive a Code 3840 error stating "Invalid value around character 0". The technologies I am using for this project include Swift, PHP, and ...

phpiosjsonswift

"Error: index values in the list must be integers or slices, not strings" when working with the JSON file retrieved from the OpenWeatherMap API

I've encountered an issue with a scraped json file from the Air Pollution API OpenWeatherMap. When attempting to access specific data using aqi = air_data['list']['main']['aqi'], I encounter the error message: TypeError: ...

pythonjsonpython-requeststypeerror

Interact with database using Ajax and Codeigniter (utilizing Bootstrap modal)

My goal is to create an advanced search feature with an interactive button that opens input fields and dropdown menus. To populate these dropdown menus with data from the database without overloading the page, I plan to use AJAX when the user triggers the ...

phpjqueryajaxtwitter-bootstrapcodeigniter

What is the most efficient method for implementing absolute imports in Webpack 2?

I'm currently working on configuring Webpack for a React project and I'm looking to streamline how I import my components. Ideally, I want to import components like this: import ComponentName from "components/ComponentName" Instead of the more ...

javascriptreactjswebpack

Encountered an issue when deploying a Gatsby JS site on Netlify due to a non-zero exit code returned by the build script

Recently, I discovered Gatsby JS (https://github.com/gatsbyjs/gatsby) and chose to construct my portfolio website using this generator. To begin, I forked their default starter site (gatsby-starter-default) and developed my portfolio from there (https://g ...

javascriptnode.jsreactjsgatsbynetlify

Issue with Iframe DOM: encountering undefined values while attempting to retrieve form field data

For some reason, I've been struggling to debug a piece of JavaScript that should be straightforward. I've experimented with various approaches, such as using a form to access fields and using getElementById. I've also played around with incl ...

javascripthtmldomiframe

Struggling to get collapsible feature functioning on website

I'm trying to create a collapsible DIV, and I found a solution on Stack Overflow. However, I'm having trouble getting it to work on my website. I created a fiddle with the full code, and it works there. But when I implement it on my site, the con ...

javascripthtmljquery