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

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
-
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;
}** Was this post helpful? Click Agree or Like below. **
** Did this solve your problem? Accept it as a solution! **0
Answers
-
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;
}** Was this post helpful? Click Agree or Like below. **
** Did this solve your problem? Accept it as a solution! **0 -
it's working ! Thank you
1 -
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! **1
Categories
- All Categories
- Product Ideas
- 2.1K Ideas Exchange
- Data Connections
- 1.3K Connectors
- 309 Workbench
- 17 Cloud Integrations
- Data & ETL
- 2.3K Magic ETL
- 120 SQL DataFlows
- 667 Datasets
- Visualize & Apps
- 90 App Studio
- 198 Pro-code Components
- 2.6K Charting & Analyzer
- 873 Calculations & Variables (Beast Mode)
- AI & Data science
- 23 Domo AI & AI Chat
- 4 Managing AI
- 18 Jupyter Workspaces
- Automate
- 122 Workflows
- Alerts
- Distribute
- 118 Domo Everywhere
- 284 Reporting
- Manage
- 146 Governance & Security
- 489 APIs
- 11 Add-ins & Plugins
- 13 Domo Community Gallery
- 49 Product Releases
- 13 Domo University
- Community Forums
- 41 Getting Started
- 31 Community Member Introductions
- 118 Community Announcements
- 5K Archive