Skip to content

    • APIs & Domo Developer

    APIs & Domo Developer

    Reading dataset into a custom app with Javascript

    Member
    in APIs & Domo Developer

    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.

    Word
    Javascript.docx
    Uploaded 4.39 KB
    HTML.docx
    CSS.docx
    OutputPage.png
    Tagged:

    Welcome!

    It looks like you're new here. Members get access to exclusive content, events, rewards, and more. Sign in or register to get started.
    Sign In

    Best Answers

    • Contributor
      edited May 2024 Answer ✓

      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.

      Screenshot 2024-05-14 at 1.21.44 PM.png

      ** Was this post helpful? Click 💡/💖/👍/😊 below. **
      ** If it solved your problem. Accept it as a solution! ✔️ **

      Or do you need more help? https://calendly.com/matthew-kastner/15-minute-chat
      Did I help you out? Feedback is priceless and will help me more than you know.Write a review!

    • Coach
      Answer ✓

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

      image.png image.png

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

    • Contributor
      Answer ✓

      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.

      Group 148 (1).png


      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! ✔️ **

      Or do you need more help? https://calendly.com/matthew-kastner/15-minute-chat
      Did I help you out? Feedback is priceless and will help me more than you know.Write a review!

    Answers

    • Contributor

      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! ✔️ **

      Or do you need more help? https://calendly.com/matthew-kastner/15-minute-chat
      Did I help you out? Feedback is priceless and will help me more than you know.Write a review!

    • Member

      Thank you for that. But still not getting any output

      output2.png
    • Member

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

    • Contributor
      edited May 2024 Answer ✓

      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.

      Screenshot 2024-05-14 at 1.21.44 PM.png

      ** Was this post helpful? Click 💡/💖/👍/😊 below. **
      ** If it solved your problem. Accept it as a solution! ✔️ **

      Or do you need more help? https://calendly.com/matthew-kastner/15-minute-chat
      Did I help you out? Feedback is priceless and will help me more than you know.Write a review!

    • Member

      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.

      Output7.png
    • Member

      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?

      dataset error.png
    • Coach

      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! **

    • Coach
      Answer ✓

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

      image.png image.png

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

    • Coach 
      1. //This code uses the example dataset…

      2. var domo = window.domo;
      3. var datasets = window.datasets;
      4.  
      5. // get the data
      6. domo.get(`data/v1/${datasets[0]}`).then(function(result){
      7.     var tableHTML = "<table><tr>";
      8.     
      9.     // Extract headers and make them bold
      10.     var headers = Object.keys(result[0]);
      11.     headers.forEach(function(header) {
      12.         tableHTML += "<th><b>" + header + "</b></th>";
      13.     });
      14.     tableHTML += "</tr>";
      15.  
      16.     // Loop through each row and populate table
      17.     result.forEach(function(row) {
      18.         tableHTML += "<tr>";
      19.         headers.forEach(function(header) {
      20.             tableHTML += "<td>" + row[header] + "</td>";
      21.         });
      22.         tableHTML += "</tr>";
      23.     });
      24.     tableHTML += "</table>";
      25.  
      26.     // Link to html
      27.     document.getElementById("result").innerHTML = tableHTML;
      28. });

      2. <!DOCTYPE html>
      3. <html lang="en">
      4.  
      5. <body>
      6.     <header>
      7.         <h1>Full Dataset Test</h1>
      8.     </header>
      9.     <main>
      10.         <div id="result"></div>
      11.     </main>
      12.  
      13. </body>
      14. </html>


      2.         table {
      3.             border-collapse: collapse;
      4.             width: 100%;
      5.         }
      6.  
      7.         th, td {
      8.             border: 1px solid black;
      9.             padding: 8px;
      10.             text-align: left;
      11.         }
      12.  
      13.         th {
      14.             background-color: #4CABC5;
      15.             color: white;
      16.             font-weight: bold;
      17.         }
      18.  
      19.         td:nth-child(3) {
      20.             border-left: 3px solid black;
      21.             border-right: 3px solid black;
      22.             background-color: #A3D4E1;
      23.         }

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

    • Contributor
      Answer ✓

      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.

      Group 148 (1).png


      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! ✔️ **

      Or do you need more help? https://calendly.com/matthew-kastner/15-minute-chat
      Did I help you out? Feedback is priceless and will help me more than you know.Write a review!

    Welcome!

    It looks like you're new here. Members get access to exclusive content, events, rewards, and more. Sign in or register to get started.
    Sign In

    Welcome!

    It looks like you're new here. Members get access to exclusive content, events, rewards, and more. Sign in or register to get started.
    Sign In

    Quick Links

    Categories