title: JavaScript functions accessing SQLite db
body: <p>I'm using Electron with JavaScript and am attempting to access a SQLite db.  The output of the db is a list of countries.  The target is a simple ul in a div.  The action is called by an onclick event attached to a button on the page.</p>
  
  <p>Here's the issue.  Technically speaking, I can access the db.  However, in the data layer (data.js) I have two options that only sort of work to populate an array from the db file.  The console.log() found in each is simply for debugging.</p>
  
  <p>In option 1, the return element returns the array fully populated with a length of 23 (see Option 1 image below) whereas moving the return element out of the db.all function returns the array empty on top but populated when expanded with a length of 0 (see Option 2 image).  I think the first option is how the array should look, but because the array is contained within the db.all function, it doesn't return anything for getLocations() in data.js.  Subsequently, the arrays in model.js and view.js (code below) remain undefined.</p>
  
  <p>If I go with option 2, the arrays populate down the line (i.e. data, model, and view), but the length remains 0 for all the arrays because they are "empty on top".  As such, iterating through the array for writing to the div fails because the length ultimately is incorrect at 0.</p>
  
  <p>As a side note, if I hard code the countries into the array in data.js, all works fine and the list of countries write to the page.  While I can (and need to) get the data from the db file, it seems to cause the issues above.  So, it's really all about how data.js is returning the array.</p>
  
  <p>Does anyone have any suggestions on how to properly get the arrays to populate correctly so I can iterate through them and write to the page?</p>
  
  <p>Your help is appreciated!!</p>
  
  <hr>
  
  <p>Data.js option 1:</p>
  
  <pre><code>function getLocations() {
      var sqlite3 = require('sqlite3').verbose();
      var file = 'db/locations.sqlite3';
      var db = new sqlite3.Database(file);
      var larray = [];
  
      db.all('SELECT * FROM Country', function(err, rows) {
          rows.forEach(function(row) {
              larray.push(row.CountryName);
          })
      console.log(larray);
      return larray;
      });
  }
  </code></pre>
  
  <p>Data.js option 2:</p>
  
  <pre><code>function getLocations() {
      var sqlite3 = require('sqlite3').verbose();
      var file = 'db/locations.sqlite3';
      var db = new sqlite3.Database(file);
      var larray = [];
  
      db.all('SELECT * FROM Country', function(err, rows) {
          rows.forEach(function(row) {
              larray.push(row.CountryName);
          })
      });
      console.log(larray);
      return larray;  
  }
  </code></pre>
  
  <hr>
  
  <p>Option 1 image:
  <a href="https://i.stack.imgur.com/HRGxh.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HRGxh.jpg" alt="enter image description here"></a></p>
  
  <p>Option 2 image:
  <a href="https://i.stack.imgur.com/y94v6.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/y94v6.jpg" alt="enter image description here"></a></p>
  
  <p>model.js:</p>
  
  <pre><code>function Locations() {
  
      //Pull location values from data
      var viewLoc =  getLocations();
  
      return viewLoc;
  }
  </code></pre>
  
  <p>view.js:</p>
  
  <pre><code>function viewLocation() {
  
      var viewLoc = Locations();
  
      var container = document.getElementById('wrapper');
  
      for (var i=0; i &lt; viewLoc.length; i++) {  
        container.insertAdjacentHTML('beforeend', '&lt;li&gt;' + viewLoc[i]);
      }
  };
  </code></pre>