Reading dataset into a custom app with Javascript

Options

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.

Tagged:

Best Answers

  • MattTheGuru
    MattTheGuru Contributor
    edited May 16 Answer βœ“
    Options

    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.

    ** Was this post helpful? Click πŸ’‘/πŸ’–/πŸ‘/😊 below. **
    ** If it solved your problem. Accept it as a solution! βœ”οΈ **

  • ArborRose
    ArborRose Coach
    Answer βœ“
    Options

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

    ** Was this post helpful? Click Agree or Like below. **
    ** Did this solve your problem? Accept it as a solution! **

  • MattTheGuru
    MattTheGuru Contributor
    Answer βœ“
    Options

    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.

    ** Was this post helpful? Click πŸ’‘/πŸ’–/πŸ‘/😊 below. **
    ** If it solved your problem. Accept it as a solution! βœ”οΈ **

Answers

  • MattTheGuru
    MattTheGuru Contributor
    Options

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


    ** Was this post helpful? Click πŸ’‘/πŸ’–/πŸ‘/😊 below. **
    ** If it solved your problem. Accept it as a solution! βœ”οΈ **

  • user027022
    Options

    Thank you for that. But still not getting any output

  • user027022
    Options

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

  • MattTheGuru
    MattTheGuru Contributor
    edited May 16 Answer βœ“
    Options

    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.

    ** Was this post helpful? Click πŸ’‘/πŸ’–/πŸ‘/😊 below. **
    ** If it solved your problem. Accept it as a solution! βœ”οΈ **

  • user027022
    Options

    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
    Options

    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
    Options

    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?

    ** Was this post helpful? Click Agree or Like below. **
    ** Did this solve your problem? Accept it as a solution! **

  • ArborRose
    ArborRose Coach
    Answer βœ“
    Options

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

    ** Was this post helpful? Click Agree or Like below. **
    ** Did this solve your problem? Accept it as a solution! **

  • ArborRose
    Options
    //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; }

    ** Was this post helpful? Click Agree or Like below. **
    ** Did this solve your problem? Accept it as a solution! **

  • MattTheGuru
    MattTheGuru Contributor
    Answer βœ“
    Options

    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.

    ** Was this post helpful? Click πŸ’‘/πŸ’–/πŸ‘/😊 below. **
    ** If it solved your problem. Accept it as a solution! βœ”οΈ **