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

ielguellouchi · 2024-07-22T14:06:58+00:00

There was an error rendering this rich post.

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.

Find more posts tagged with

Accepted answers

ArborRose

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;

});

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;

        }

All comments

ArborRose

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;

});

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;

        }

ielguellouchi

it's working ! Thank you

ArborRose

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.