title: NodeJS - How to make res.render() run after a function and not asynchronisally
body: <p>I made a simple application that it's UI shows an Input Text and two buttons: Fetch and Show.</p>
  
  <p>The general idea is after the user types a word and clicks on "Fetch"
  the app would request the Meaning Like words from Datamuse API and returns in a JSON format the words and their tags (Noun,Verb, Adjective...).</p>
  
  <p>I want that if the apps succeeds to fetch those words, then a success text will be in a variable called "fetchStatus".</p>
  
  <p>Afterwards, I would like that the value of "fetchStatus" will be transferred in res.render to the index.ejs that has the UI code so the user could 
  see if the fetch from Datamuse was successful or not.</p>
  
  <p>The function who runs the fetch called "FetchData(req.body.wordInput)".</p>
  
  <p>The problem is that the res.render function runs before the FetchData function, therefore the fetchStatus value is an empty string.</p>
  
  <p>In the function FetchData I've tried to return the string and pass it to res.render but with no success.</p>
  
  <p>The same situation happened if I put the "fetchStatus" as a parameter or as a global variable.</p>
  
  <pre><code>app.js
  ============
  //jshint esversion:6
  
  var fetchStatus = "";
  
  var vocabularyTags = {
    syn: {name:"synonym", freq:0},
    n: {name:"noun", freq:0},
    v: {name:"verb", freq:0},
    adj:{name:"adjective", freq:0},
    adv:{name:"adverb", freq:0},
    u:{name:"undetermined", freq:0},
    prop: {name:"propery", freq:0}
  };
  
  
  
  const express = require("express");
  const bodyParser = require("body-parser");
  const request = require("request");
  
  var app = express();
  
  // Setting ejs
  app.set('view engine', 'ejs');
  
  // Setting body-parser
  app.use(bodyParser.urlencoded({ extended: true }));
  
  
  
  app.get("/",function(req,res){
    // res.sendFile(__dirname+"/index.html");
    res.render("index", {fetchStatus:"", vocabularyTags:{}});
  
  
  });
  
  app.post("/",function(req,res){
    // var fetchStatus = "";
    var buttonPressed = req.body.submit;
  
    if (buttonPressed === "fetch") {
      FetchData(req.body.wordInput);
      console.log("Fetch Status: "+fetchStatus);
      res.render("index",{ fetchStatus:fetchStatus ,vocabularyTags:{} });
    }
    else if (buttonPressed === "show") {
      //ShowData();
      var vocabularyTagsResults = vocabularyTags;
      res.render("index",{fetchStatus:"" ,vocabularyTags:vocabularyTagsResults});
  
      // Clear Vocabulary Tags Frequencies
      for (var key in vocabularyTags) {
        vocabularyTags[key].freq = 0;
      }
  
  
  
    }
  
  });
  
  
  
  app.listen(3000,function(){
    console.log("Server is running on port 3000");
  });
  
  
  function FetchData(wordInput) {
      // var fetchStatus = "";
      var options = {
        url:"https://api.datamuse.com/words",
        method:"GET",
        qs: {
          ml: wordInput
        }
      };
  
      request(options,function(error,response,body){
  
        if (error) {
          fetchStatus = error;
        }
        else {
          var dataMuseML = JSON.parse(body);
          console.log(dataMuseML);
  
          // Counting the related tags
          dataMuseML.forEach(function(item){
            var tags = item.tags;
            tags.forEach(function(tag){
              vocabularyTags[tag].freq++;
            });
          });
          fetchStatus = "Fetch from Datamuse API has succeeded!";
        }
      });
  
      // return fetchStatus;
  }
  
  
  views/index.ejs
  ================
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Datamuse API&lt;/title&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;h1&gt;Datamuse API&lt;/h1&gt;
  
      &lt;form action="/" method="post"&gt;
        &lt;input type="text" name="wordInput" placeholder="Enter a word..."&gt;
        &lt;button type="submit" name="submit" value="fetch"&gt;Fetch&lt;/button&gt;
        &lt;button type="submit" name="submit" value="show"&gt;Show&lt;/button&gt;
      &lt;/form&gt;
  
      &lt;h3&gt; &lt;%= fetchStatus %&gt; &lt;/h3&gt;
  
  
      &lt;% for (var key in vocabularyTags) { %&gt;
        &lt;p&gt; &lt;span&gt;&lt;%= vocabularyTags[key].name %&gt;:&lt;/span&gt; &lt;span&gt; &lt;%= vocabularyTags[key].freq %&gt;&lt;/span&gt; &lt;/p&gt;
      &lt;% } %&gt;
  
  
    &lt;/body&gt;
  
  
  &lt;/html&gt;
  </code></pre>
  
  <p>The expected result is that "fetchStatus" will have a success or an error text so I could pass it to res.render which will put it in index.ejs.</p>