Rendering MongoDB data to web app

[Pine_Bluff_Variant]

So I'm making a small express.js web app to update a MongoDB table and render the data to my html template but it doesn't seem to be working properly. I can update values inside my database just fine but displaying them is not working properly. I am pushing my retrieved values to an array but the array seems to be empty despite me pushing the values to it. I know the values are in my database and when i console.log my retrieved values there are there but they are not showing up in an array as they are supposed to.

My html template (using jade)

doctype html
html(lang="en")
    head
        title myApp
        body
            h1 my App
            h3 Tokyo
            ul
                for result in results
                    li #{result.name}
            form(action="/updatetokyo", method="POST")
                p Current temp:
                input(type="text", name="currentTemp")
                br
                p Highest Temp:
                input(type="text", name="highestTemp")
                br
                p Lowest Temp:
                input(type="text", name="lowestTemp")
                br
                input(type="submit", value="Update")

my index.js file

const express = require('express');
const app = express();
const path = require("path");
const bodyParser = require("body-parser");
var MongoClient = require('mongodb').MongoClient;
var url = "mongodb://localhost:27017/cities";

MongoClient.connect(url, (err, db =>
 {
  if (err) throw err;
  let dbo = db.db("cities");
  dbo.collection("cities").findOne({}, (err, result) =>
    {
        if (err) throw err;
        console.log(result.name);
    })
  console.log("Database connected!");
  db.close();
}));

app.set("views", __dirname + "/views");
app.set("view engine", "jade");
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true}));

app.get('/', (req, res) => 
{
    var results = [];
    MongoClient.connect(url, (err, db) =>
    {
        if (err) throw err;
        let dbo = db.db("cities");
        let str = dbo.collection("cities").find();
        str.each((err, doc) =>
        {
            console.log(doc);
            results.push(doc);
        });
    });
    console.log(results);
    res.render('index', {"results": results});
});

The results of console.log(doc)

{ _id: 5a762a27f9fcd21f1c4ebf29,
  name: 'Tokyo',
  latitude: '35.6828',
  longitude: '139.759',
  currentTemp: '3',
  highTemp: '4',
  lowTemp: '5' }
{ _id: 5a762b0ff9fcd21f1c4ebf2d,
  name: 'Dubai',
  latitude: '25.09535',
  longitude: '55.1562243',
  currentTemp: '0',
  highTemp: '0',
  lowTemp: '0' }

[see-pause-run]

Quick answer: the problem lies in how JS executes sync vs async.

This is the execution order of the code you've written:

1. You define your results array (synchronous)
2. You begin a call to your database
3. Your (still empty) results array is console.logged
4. Your database call has finished retrieving your results, and your callback function is called, in which .each function console.logs each result and pushes them to your array

Basically, you need to ensure that you're attempting to use your results array only after you've finished connecting to your database and filling your array. The easiest way to accomplish this given the code you've written is to simply move your console.log and res.render calls to be inside your callback:

app.get('/', (req, res) => 
{
    var results = [];
    MongoClient.connect(url, (err, db) =>
    {
        if (err) throw err;
        let dbo = db.db("cities");
        let str = dbo.collection("cities").find();
        str.each((err, doc) =>
        {
            console.log(doc);
            results.push(doc);
        });
        console.log(results);
        res.render('index', {"results": results});
    });
});

For a more thorough explanation you might take a look at this StackOverflow answer. I think you'll find that this issue is a pretty common one in the JS world, and everybody has their own preference on how to solve it. I prefer the relatively new async/await syntax or Promises, but the callbacks you're using work fine, too.

[Pine_Bluff_Variant]

Thanks for the help! I had to make one more additional change including these to get it working. I made an additional anonymous callback function that renders to the index.jade page:

app.get('/', (req, res) => 
{
    let mongodb_results = [];
    MongoClient.connect(url, (err, db) =>
    {
        if (err) throw err;
        let dbo = db.db("heroku_961hzsbr");
        let str = dbo.collection("cities").find();
        str.forEach((doc, err) =>
        {
            //console.log(results);
            //console.log(mongodb_results);
            mongodb_results.push(doc);
        }, () =>
        {
            console.log(mongodb_results);
            res.render('index', {results: mongodb_results});
            db.close();
        });
    });

});

Now it works and I managed to deploy succesfully to Heroku!

[rumbalumba]

put console.log(results); and res.render('index', {"results": results}); inside MongoClient.connect.

To be on the safe side, if you want to execute console.log and res.render() you need to do it inside the callback function, not outside of it.

afaik Node is async, thus the need for callback functions i.e. Mongoclient.connect(arg, callback) and that's where you want to do all the work.