How to synchronize 'time-consuming value allotment' of a variable, with the next commands, in nodejs?

Question

The commands that we want to run in sync, are a part of app.post method in app.js:

ytQueryAppJs = httpsYtGetFunc(query);
console.log("ytQueryAppJs:");
console.log(ytQueryAppJs);

Here, httpsYtGetFunc is a time-consuming function and the array ytQueryAppJs gets logged in before httpsYtGetFunc finishes returning value. Hence, an empty array is logged.
Our aim is to log ytQueryAppJs, such that it contains the required values.

(I do not know how to categorise this question. Please suggest a title you find apt.)

Here is the complete code, shall it helps anyone understand the query better.

app.js

// This is a nodeJs-expressJs application.
const express = require("express");

// https to fetch data from end-point
const https = require("https");

// body-parser to read client's submitted queryValue
const bodyParser = require("body-parser");

// This app constant is created to be able to access the methods available in 'express' package.
const app = express();

// Starting the server
app.listen(3000, function() {
  console.log("Server is running on port 3000.")
});

// 'urlencoded' helps access html data. Other data formats could be JSON etc.
// body-parser required as to exclusively define "extended: true" although this is no use to us.
app.use(bodyParser.urlencoded({
  extended: true
}));

// ejs view engine has been used to use app.js variables into the output ejs file.
app.set('view engine', 'ejs');

// Variables to store the data fetched from API endpoint.
let i = 0;

let query = "";

let ytQueryResult = "";
let ytCoverResult = "";
let ytLiveResult = "";

let ytQueryAppJs = [];

let ytCoverAppJs = [];
let ytCoverUniqueAppJs = [];

let ytLiveAppJs = [];
let ytLiveUniqueAppJs = [];

// The page to load when the browser (client) makes request to GET something from the server on "/", i.e., from the homepage.
// This GET request is made as soon as the homepage url is entered in the address bar od browser, automatically.
app.get("/", function(req, res) {
  res.sendFile(__dirname + "/index.html");
});

// https://stackoverflow.com/a/14930567/14597561
function compareAndRemove(removeFromThis, compareToThis) {
  return (removeFromThis = removeFromThis.filter(val => !compareToThis.includes(val)));
}

// Declaring variables for the function 'httpsYtGetFunc'
let apiKey = "";
let urlOfYtGetFunc = "";
let resultOfYtGetFunc = "";
let extractedResultOfYtGetFunc = [];

// This function GETs data, parses it, pushes required values in an array.
function httpsYtGetFunc(queryOfYtGetFunc) {

  apiKey = "Az...xI"
  urlOfYtGetFunc = "https://www.googleapis.com/youtube/v3/search?key=" + apiKey + "&part=snippet&q=" + queryOfYtGetFunc + "&maxResults=4&order=relevance&type=video";

  // GETting data and storing it in chunks.
  https.get(urlOfYtGetFunc, (response) => {
    const chunks = []
    response.on('data', (d) => {
      chunks.push(d)
    })

    // Parsing the chunks to jJSON
    response.on('end', () => {
      resultOfYtGetFunc = JSON.parse((Buffer.concat(chunks).toString()))
      // console.log(resultOfYtGetFunc)

      // Extracting useful data, and allocating it.
      for (i = 0; i < (resultOfYtGetFunc.items).length; i++) {
        extractedResultOfYtGetFunc[i] = resultOfYtGetFunc.items[i].id.videoId;
      }
    })
  })
  return extractedResultOfYtGetFunc;
}

app.post("/", function(req, res) {

  // Accessing the queryValue user submitted in index.js
  query = req.body.queryValue;

  // Fetcing top results related to user's query and putting them in the array.
  ytQueryAppJs = httpsYtGetFunc(query);
  console.log("ytQueryAppJs:");
  console.log(ytQueryAppJs);

  // Fetching 'cover' songs related to user's query and putting them in the array.
  if (query.includes("cover") == true) {
    ytCoverAppJs = httpsYtGetFunc(query);
    console.log("ytCoverAppJs:");
    console.log(ytCoverAppJs);

    // Removing redundant values.
    ytCoverUniqueAppJs = compareAndRemove(ytCoverAppJs, ytQueryAppJs);
    console.log("ytCoverUniqueAppJs:");
    console.log(ytCoverUniqueAppJs);
  } else {
    ytCoverAppJs = httpsYtGetFunc(query + " cover");
    console.log("ytCoverAppJs:");
    console.log(ytCoverAppJs);

    // Removing redundant values.
    ytCoverUniqueAppJs = compareAndRemove(ytCoverAppJs, ytQueryAppJs);
    console.log("ytCoverUniqueAppJs:");
    console.log(ytCoverUniqueAppJs);
  }

  // Fetching 'live performances' related to user's query and putting them in the array.
  if (query.includes("Live") == true) {
    ytLiveAppJs = httpsYtGetFunc(query);
    console.log("ytLiveAppJs:");
    console.log(ytLiveAppJs);

    // Removing redundant values.
    ytLiveUniqueAppJs = compareAndRemove(ytLiveAppJs, ytQueryAppJs);
    ytLiveUniqueAppJs = compareAndRemove(ytLiveAppJs, ytCoverAppJs);
    console.log("ytLiveUniqueAppJs:");
    console.log(ytLiveUniqueAppJs);
  } else {
    ytLiveAppJs = httpsYtGetFunc(query + " live");
    console.log("ytLiveAppJs:");
    console.log(ytLiveAppJs);

    // Removing redundant values.
    ytLiveUniqueAppJs = compareAndRemove(ytLiveAppJs, ytQueryAppJs);
    ytLiveUniqueAppJs = compareAndRemove(ytLiveAppJs, ytCoverAppJs);
    console.log("ytLiveUniqueAppJs:");
    console.log(ytLiveUniqueAppJs);
  }

  // The 'results' named EJS file is rendered and fed in response. The 'required' data is passed into it using the following variable(s).
  // res.render("results", {
  //   ytQueryEjs: ytQueryAppJs,
  //   ytCoverUniqueEjs: ytCoverUniqueAppJs,
  //   ytLiveUniqueEjs: ytLiveUniqueAppJs
  // });
  // console.log("Value to be sent for rendering: ");
  // console.log(ytQueryAppJs);
  // console.log(ytCoverUniqueEjs);
  // console.log(ytLiveUniqueEjs);

  // Emptying all the arrays.
  ytQueryAppJs.length = 0;

  ytCoverAppJs.length = 0;
  ytCoverUniqueAppJs.length = 0;

  ytLiveAppJs.length = 0;
  ytLiveUniqueAppJs.length = 0;
});

index.html



  
    
    One Music

Expected flow:

User submits query in index.html.
The values of arrays, ytQueryAppJs, ytCoverAppJs, ytCoverUniqueAppJs, ytLiveAppJs, ytLiveUniqueAppJs gets logged in the console, based on the query.

Current flow:

User submits query in index.js.
Aforementioned arrays get logged in console, but are empty.
User submits new query in index.html.
The values of arrays, ytQueryAppJs, ytCoverAppJs, ytLiveAppJs, gets logged in the console, based on the previous query.
These two arrays are also logged in but are still empty: ytCoverUniqueAppJs, ytLiveUniqueAppJs.

Note: I am a beginner. Shall the question requires better tags, please edit.

How to synchronize 'time-consuming value allotment' of a variable, with the next commands, in nodejs?

0 Answers