Fetch data from a dataset using the Domo.js library and display it in DDX Brick

ielguellouchi
ielguellouchi Member
in Charting

I am experiencing an issue with a DDX Brick implementation. I am unable to dynamically render data from a dataset into a table format within a DDX Brick.I have created a specific format using HTML & CSS, but I can't connect my Beast Modes to this JavaScript so I can show my data within this new table.

Best Answer

  • ArborRose
    ArborRose Coach
    Answer ✓

    Here's an example. Note that my dataset0 is set for Example Sales Data. This would be set to your own dataset.

    Javascript:

    
var domo = window.domo;
    
var datasets = window.datasets;

    
// get the data
    
domo.get(`data/v1/${datasets[0]}`).then(function(result){
    
    var tableHTML = "<table><tr>";

    
    // Extract headers and make them bold
    
    var headers = Object.keys(result[0]);
    
    headers.forEach(function(header) {
    
        tableHTML += "<th><b>" + header + "</b></th>";
    
    });
    
    tableHTML += "</tr>";

    
    // Loop through each row and populate table
    
    result.forEach(function(row) {
    
        tableHTML += "<tr>";
    
        headers.forEach(function(header) {
    
            tableHTML += "<td>" + row[header] + "</td>";
    
        });
    
        tableHTML += "</tr>";
    
    });
    
    tableHTML += "</table>";

    
    // Link to html
    
    document.getElementById("result").innerHTML = tableHTML;
    
});
    image.png 
    HTML:

    
<!DOCTYPE html>
    
<html lang="en">

    
<body>
    
    <header>
    
        <h1>Full Dataset Test</h1>
    
    </header>
    
    <main>
    
        <div id="result"></div>
    
    </main>

    
</body>
    
</html>

    CSS:

    
        table {
    
            border-collapse: collapse;
    
            width: 100%;
    
        }

    
        th, td {
    
            border: 1px solid black;
    
            padding: 8px;
    
            text-align: left;
    
        }

    
        th {
    
            background-color: #4CABC5;
    
            color: white;
    
            font-weight: bold;
    
        }

    
        td:nth-child(3) {
    
            border-left: 3px solid black;
    
            border-right: 3px solid black;
    
            background-color: #A3D4E1;
    
        }
    image.png

    ** Was this post helpful? Click Agree or Like below. **
    ** Did this solve your problem? Accept it as a solution! **

Answers

  • ArborRose
    ArborRose Coach
    Answer ✓

    Here's an example. Note that my dataset0 is set for Example Sales Data. This would be set to your own dataset.

    Javascript:

    
var domo = window.domo;
    
var datasets = window.datasets;

    
// get the data
    
domo.get(`data/v1/${datasets[0]}`).then(function(result){
    
    var tableHTML = "<table><tr>";

    
    // Extract headers and make them bold
    
    var headers = Object.keys(result[0]);
    
    headers.forEach(function(header) {
    
        tableHTML += "<th><b>" + header + "</b></th>";
    
    });
    
    tableHTML += "</tr>";

    
    // Loop through each row and populate table
    
    result.forEach(function(row) {
    
        tableHTML += "<tr>";
    
        headers.forEach(function(header) {
    
            tableHTML += "<td>" + row[header] + "</td>";
    
        });
    
        tableHTML += "</tr>";
    
    });
    
    tableHTML += "</table>";

    
    // Link to html
    
    document.getElementById("result").innerHTML = tableHTML;
    
});
    image.png 
    HTML:

    
<!DOCTYPE html>
    
<html lang="en">

    
<body>
    
    <header>
    
        <h1>Full Dataset Test</h1>
    
    </header>
    
    <main>
    
        <div id="result"></div>
    
    </main>

    
</body>
    
</html>

    CSS:

    
        table {
    
            border-collapse: collapse;
    
            width: 100%;
    
        }

    
        th, td {
    
            border: 1px solid black;
    
            padding: 8px;
    
            text-align: left;
    
        }

    
        th {
    
            background-color: #4CABC5;
    
            color: white;
    
            font-weight: bold;
    
        }

    
        td:nth-child(3) {
    
            border-left: 3px solid black;
    
            border-right: 3px solid black;
    
            background-color: #A3D4E1;
    
        }
    image.png

    ** Was this post helpful? Click Agree or Like below. **
    ** Did this solve your problem? Accept it as a solution! **

  • ielguellouchi
    ielguellouchi Member

    it's working ! Thank you

    ArborRose

  • ArborRose
    ArborRose Coach

    If you set all three of the datasets (dataset0, dataset1, dataset2) to your dataset, you can remove the Example Sales Data. But be careful, removing it without changing all can wipe out the brick.

    ** Was this post helpful? Click Agree or Like below. **
    ** Did this solve your problem? Accept it as a solution! **

Categories