title: How To: Display Data from AlaSQL Excel File Import within HTML/ASP Page
body: <p>I am in the process of working on an internal website that will need to pull data exclusively from static XLSX spreadsheets (updated through automation daily). On this site, I the data will need to be posted in a table and sortable/searchable. I can work on the special features on my own (search/sort options) after I have the content actually displaying correctly. </p>
  
  <p>My Problem: I have no idea how to get the content to display after successfully querying through AlaSQL. I can see the content in JSON format in the console, but I am no JS programmer and have little to no idea how to pass the information along to get it to display correctly.</p>
  
  <p>I am working on a server with IIS 8, working in HTML/C# for the base website code, but also incorporating jQuery, the W3.CSS framework, and the JS library AlaSQL and dependencies (for Excel file reading). </p>
  
  <p>As stated above, I have the ground work in place - Alasql is operating and I am getting results from the Excel file as I should, but only to the console. I know from the base code below that it is by design posting it to the console, but I am so very green at JS work, I do not know how to store the data so that it can be pulled and displayed in a table in HTML.</p>
  
  <p>I also do have jQuery in place to hopefully assist with formatting the file table, if I can get that far [jquery-3.4.1 and jquery.tablesorter (<a href="https://mottie.github.io/tablesorter/docs/)]" rel="nofollow noreferrer">https://mottie.github.io/tablesorter/docs/)]</a>.</p>
  
  <pre><code> &lt;div class="w3-panel" id="OhYeah"&gt;
   &lt;/div&gt;
   &lt;script&gt;
        var ImportData = (alasql.promise('select * from xlsx("File.xlsx",{sheetid:"Sheet1"})')
             .then(function(data){
              console.log(data);
         }).catch(function(err){
          console.log('There was an error reading the source file.:', err);
        }));
        document.getElementById("OhYeah").innerHTML = ImportData
   &lt;/script&gt;
  </code></pre>
  
  <p>So, just through bumbling around, I found a resource that said the above "document.getElementByID" line should display the data in a raw string (so I would know I'm at least making headway) - instead, I get the output "[object Promise]". </p>
  
  <p>I have looked at other resources on this site that have similar requests, but none exactly helped - This is the closest question I've found, but attempting their code did not work. (<a href="https://stackoverflow.com/questions/44141212/excel-table-to-html-table">Excel Table to Html table</a>)</p>
  
  <p>End result I am aiming for is to have the content loop through and create a table with the desired content. I cannot find any resources that specifically deal with AlaSQL output that explain this even in part. As with most things, I can figure it out if I have at least some code to "reverse engineer" into what I am looking to do.</p>
  
  <p>Any thoughts?</p>
  
  <p>---EDIT 6/18---</p>
  
  <p>So, just trying to work through this logically, I am getting a little further, but still need guidance. I modified the code to be the following and now I am getting different output.</p>
  
  <pre><code> &lt;div class="w3-panel" id="OhYeah"&gt;
   &lt;/div&gt;
   &lt;script&gt;
        alasql.promise('select * from xlsx("File.xlsx",{sheetid:"Sheet1"})')
             .then(function(data){
              document.getElementById("OhYeah").innerHTML = (data)
              //console.log(data);
         }).catch(function(err){
          console.log('There was an error reading the source file.:', err);
        });
   &lt;/script&gt;
  </code></pre>
  
  <p>I now receive 755 (the number of rows within my spreadsheet) "[object Object]" print outs on the display page.</p>
  
  <pre><code>[object Object],[object Object],[object Object],[object Object],
  [object Object],[object Object],[object Object],[object Object],
  [object Object],[object Object],[object Object],[object Object],
  [object Object],[object Object],[object Object],[object Object], [...]
  </code></pre>