Alasql into HTML not updating Angular-based page

[Robin-Lord]

Working in Angular flavour Ionic (5.4.16)

Running the INTO HTML(cssSelector,options) command has no visible result and throws no error.

I've confirmed that the code is continuing to run after this line.

I feel like just dumping the contents of the html and ts files in here would be unhelpful but here's a direct copy-paste of relevant lines.

HTML file
<div id="res"></div>

**ts file **

res = alasql(queryToRun)
    console.log(res)
  
  if (res.length < 1){
      // Looks like the user didn't get any results back
      myError = "Looks like your query didn't return any results \n\n"
  
      if (queryToRun.toLowerCase().includes("where")){
          myError = myError+"Double check your 'where' statement to make sure the columns are right. \nAnd if you're searching for text you're putting that text in 'quotes' "
      }
  
      throw myError
  }

  console.log("Writing to html")
  
  res2 = alasql(`SELECT * INTO HTML("#res", { headers :true }) FROM ?`, [res])

  console.log(res2)

I'm not terribly experienced with Angular but have seen that it rejects attempts to update element contents directly. For example, in the same ts file I have to write the below to clear the contents from the div I want alasql to put this table into. If I don't first

var output = document.querySelector('#res') as HTMLInputElement | null;
output.innerText = ''

I think alasql is updating html elements using el.innerHTML+=s which could be the problem.

A quick(er) solution than adding a specific workaround for this could be to give the option of returning html rather than json (sorry if I've missed that as an existing feature already).

[mathiasrw]

I dont know much about Angular, but could it be because there is a virtual dom that overwrites the changes?

A quick(er) solution than adding a specific workaround for this could be to give the option of returning html rather than json

Interesting. How would you propose that should work?

[Robin-Lord]

Thanks for the quick response! Yea I think you're right.

I can't claim to know the alasql code well enough to know what's most workable but user flow I'm picturing is,

• User either uses a parameter or specifies in SQL statement (which avoids need to add parameters to functions) that they want HTML written into response (or some other agreed specific string that isn't a css selector)
• The same way alasql returns json when "INTO HTML" isn't used, it returns the marked up HTML that alasql would have written directly
• The user then handles any workarounds required to dump the html into an element (I'm thinking there are probably similar issues in frameworks like React and it's a poor use of your time to have to figure out and keep updated all of the different syntaxes)

What do you think?

[mathiasrw]

I see where you are going, but I dont like to add more opinionated outputs.

If you dont know the name of the columns have a look at https://github.com/AlaSQL/alasql/wiki/Recordset

If you do know the name of the columns have a look at https://github.com/AlaSQL/alasql/wiki/Recordset

Or just use the default output with something like:

html = `<table>
  <thead>
    <tr>
      <th>Id</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    ${alasql('select id, name from ?', [res]).reduce(tail, el=>{
           tail += `<tr>
                          <td>${el.id}</td>
                          <td>${el.name}</td>
                    </tr>`
    })}
  </tbody>
</table>`;

[Robin-Lord]

Understood! Good to confirm and thanks for the pointer! Constructing the output myself was my next port-of-call but given how much thought you've put in to a bunch of this stuff it seemed silly not to try to use the logic you've already laid out.

I'll probably make something Angular-native. Anywhere helpful to share it if I do?

[mathiasrw]

Share it here - then we get it into the wiki if it seems to be of general interest