Reading dataset into a custom app with Javascript

user027022

Hello. I created this customer app but no matter what I do I cannot get anything to display. I have a dataset with a few columns and I want to display those column values in the custom app. I know javascript, html, and css, but having a hard time getting anything from the dataset to display. I have included the files I created along with the output image. Any help would be appreciated. Thanks.

Javascript.docx

HTML.docx

CSS.docx

MattTheGuru

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.

ArborRose

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

MattTheGuru

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.

MattTheGuru

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:
———

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

// Fetch the data using the pre-configured dataset alias 'DATASET0'
var query = `/data/v1/${datasets[0]}`;
domo
.get(query)
.then(function (data) {
var tableBody = document.getElementById('dataRows');
data.forEach(function(row) {
var tr = document.createElement('tr');

var td1 = document.createElement('td');
var link = document.createElement('a');
link.href = row.URL || '#'; // Adjust the property name as per your dataset columns
link.textContent = row.Title || 'No Title'; // Adjust the property name as per your dataset columns
td1.appendChild(link);
tr.appendChild(td1);

var td2 = document.createElement('td');
td2.textContent = row.Desc || 'No Description'; // Adjust the property name as per your dataset columns
tr.appendChild(td2);

tableBody.appendChild(tr);
});
})
.catch(function (error) {
console.error("Error fetching data:", error);
});

user027022

Thank you for that. But still not getting any output

user027022

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

MattTheGuru

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.

user027022

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.

user027022

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?

ArborRose

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?

ArborRose

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

ArborRose

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

MattTheGuru

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.