Reading dataset into a custom app with Javascript

I can see that there we probably some simple CSS updates between the code, nothing was added that is hiding or modifying the HTML's classes or ids right?

That could make the table not render, because your code is working fine for me.

Here's a couple screenshots showing two different ways I'm calling the dataset. Note the difference in function(result) vs handleResult.

Here is a video of me hooking up the code that I sent you: https://www.loom.com/share/c8eb60962c6847db89f569e1181564d3?sid=9c876d8d-cd82-4309-9dc2-1c3a278a00cb

And I attached an image of where you can find the uploading of a dataset.

Please 💡/💖/👍/😊 this post if you read it and found it helpful.
Please accept the answer if it solved your problem.

All comments

Is there a reason you are waiting for the DOMContentLoaded message?

You shouldn't need to wait for that to be fired off.
The below code will now call to a listed dataset:
———

Thank you for that. But still not getting any output

Is there a security setting that I need to update in Domo to make this work?

I got it to work! But I keep getting an error while saving it "Error Creating DomoApp". I suspect that the DATASET0 is not binded correctly to the data. I have to manually select the data every time I access the page.

here is what I see when I first get into the app. I have to manually choose and bind the data for it to work. Where do I setup the dataset0 to bind with the data?

Are you saving after you select the dataset at dataset0? It looks like you are calling the dataset properly. And you've selected it. What is the warning in the triangle?

Here's a couple screenshots showing two different ways I'm calling the dataset. Note the difference in function(result) vs handleResult.

//This code uses the example dataset…


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



<!DOCTYPE html>
<html lang="en">
 
<body>
    <header>
        <h1>Full Dataset Test</h1>
    </header>
    <main>
        <div id="result"></div>
    </main>
 
</body>
</html>




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