Reading dataset into a custom app with Javascript

user027022 · May 13

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 · May 14

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 · May 14

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

MattTheGuru · May 14

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 · May 13

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

user027022 · May 13

Thank you for that. But still not getting any output

user027022 · May 14

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

MattTheGuru · May 14

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 · May 14

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 · May 14

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 · May 14

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 · May 14

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

ArborRose · May 14

//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 · May 14

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.

Reading dataset into a custom app with Javascript

Best Answers

Answers

Categories