title: Setting up a client to server (and database) connection and updating client html
body: <p>I'm setting up a web-server that the client would communicate with to get data from a database. </p>
  
  <p>I am have both my server and database set up on localhost (1234 and 3306) and I want my client to receive the data and have a certain DOM element be updated</p>
  
  <p>I understand this might be an XY problem, so I'll give appropriate context. This is the scenario I'm trying to build:
  User clicks on element, element pops in front of user (iframe), said iframe contains basic html for an about page, its content is updated correspondingly to the element clicked. Suppose user clicked element cat, element cat in database is id=3 in its table, id=3 will be enough to access the cat txt and jpg contained in its directory then these will show on the iframe.</p>
  
  <p>The content updating is what I'm asking about here and how to set this up correctly, I have no restrictions to what I can do, but I would prefer doing it in javascript (because I already understand it)</p>
  
  <p>I have looked up a bunch on mariadb and sqlite and have both setup and been trying to make both do what I want, to no avail.</p>
  
  <p>Code giving here is just to show what I have tried, I don't know if this is the correct solution for my problem:</p>
  
  <pre><code>this.server.on("request", (request, response) =&gt; {
                  if (request.url == "/build/app/description.html"){
                      mariadb.createConnection({host: '127.0.0.1', user: 'root', password: 'woopdidoo', database: 'baseddata', port: '3306', multipleStatements: true})
                          .then(conn =&gt; {
                              conn.query('SELECT type FROM expertise; SELECT type FROM expertise; SELECT type FROM expertise;')
                              .then (rows =&gt; {
                                  for (var i = 0; i &lt; (rows.length); i++){
                                      console.log(rows[i]);
                                  }
                                  response.write('some html');
                                  response.end();
                                  conn.end();
                              })
                              .catch (err =&gt; {
                                  console.log('Request error');
                              });
                          })
                          .catch(err =&gt; {
                              //handle error
                              console.log('Connection error');
                          });
                  }else{
                  return console.debug(`Received request ${request.method} ${request.url}`);
                  }
              });
  </code></pre>
  
  <p>I have tried using the response.write method which works, but :
  1- It overwrites whatever HTML I have (understandable)
  2- If I make the same request again, it will fail and my server will crash (end before write error)</p>
  
  <p>Is my approach coherent to what I'm trying to do? If not, how would you do it?</p>