Implementing promises in my MEAN stack application

Question

Implementing promises in my MEAN stack application

I have developed a controller that performs a Bing search based on the user's input in the URL. After testing the controller with console.log, it seems to be functioning correctly and I have set the variable to return the results. However, when trying to display the information on the page from the route file, nothing is showing up. I suspected it might be an asynchronous issue, so I am attempting to use promises to ensure that the controller has returned before calling res.json. Since I am not very familiar with promises, there may be a syntax error or I could be approaching this problem incorrectly. Can someone review the syntax and see if there is an issue? Currently, only an empty object is being displayed on the page.

app.route('/imagesearch/:keyword')
    .get(function (req, res) {
        var resObj = [];
        resObj = new Promise (function(resolve, reject){
            resolve(bingSearchHandler.findImages(req.params));
        });

        resObj.then(res.json(resObj));

    });

//BINGSEARCHHANDLER
'use strict';

var bingAPPID = 'fwHyQAoJMJYmK8L4a3dIV2GAEUfXAlFRjCnBx0YbfPE=';
var Search = require('bing.search');
var util = require('util');

var search = new Search(bingAPPID);

function bingSearchHandler () {

this.findImages = function(userInput){
    var keyword = userInput.keyword;
    search.images(keyword,
          {top: 10},
          function(err, results) {
            if(err)
                {
                    console.log(err);
                }
            else
                {
                    var resArr = [];
                  (util.inspect(results, 
                  {colors: true, depth: null})); 

                  for(var i=0;i<results.length;i++)
                    {
                        var tempObj = {};
                        tempObj.url = results[i].url;
                        tempObj.snippet = results[i].title;
                        tempObj.thumbnail = results[i].thumbnail.url;
                        tempObj.context = results[i].sourceUrl;

                        resArr.push(tempObj);
                    }
                    console.log(resArr);
                    return resArr;
                }
          }
        );
  }

}

module.exports = bingSearchHandler;

javascript express asynchronous

Answer 1

Answer №1

Are you looking for a solution? I recommend giving this code a try. You can find the documentation for bing.search here. It's always a good practice to use callbacks instead of promises in NodeJs. Remember that the first parameter of a callback is usually the error, followed by the response.

app.route('/imagesearch/:keyword')
.get(function (req, res) {
    bingSearchHandler.findImages(req.params, function (err, response) {
      if (err) return res.status(400)

      res.json(response)
    })
});

//BINGSEARCHHANDLER
'use strict';

var bingAPPID = 'fwHyQAoJMJYmK8L4a3dIV2GAEUfXAlFRjCnBx0YbfPE=';
var Search = require('bing.search');
var util = require('util');

var search = new Search(bingAPPID);

function bingSearchHandler () {

this.findImages = function(userInput, callback){
    var keyword = userInput.keyword;
    search.images(keyword,
          {top: 10},
          function(err, results) {
            if(err) callback(err)
            else
                {
                    var resArr = [];
                  (util.inspect(results,
                  {colors: true, depth: null}));

                  for(var i=0;i<results.length;i++)
                    {
                        var tempObj = {};
                        tempObj.url = results[i].url;
                        tempObj.snippet = results[i].title;
                        tempObj.thumbnail = results[i].thumbnail.url;
                        tempObj.context = results[i].sourceUrl;

                        resArr.push(tempObj);
                    }
                    console.log(resArr);
                    return callback(null, resArr);
                }
          }
        );
  }

}

module.exports = bingSearchHandler;

Answer 2

Are you looking for a solution? I recommend giving this code a try. You can find the documentation for bing.search here. It's always a good practice to use callbacks instead of promises in NodeJs. Remember that the first parameter of a callback is usually the error, followed by the response.

app.route('/imagesearch/:keyword')
.get(function (req, res) {
    bingSearchHandler.findImages(req.params, function (err, response) {
      if (err) return res.status(400)

      res.json(response)
    })
});

//BINGSEARCHHANDLER
'use strict';

var bingAPPID = 'fwHyQAoJMJYmK8L4a3dIV2GAEUfXAlFRjCnBx0YbfPE=';
var Search = require('bing.search');
var util = require('util');

var search = new Search(bingAPPID);

function bingSearchHandler () {

this.findImages = function(userInput, callback){
    var keyword = userInput.keyword;
    search.images(keyword,
          {top: 10},
          function(err, results) {
            if(err) callback(err)
            else
                {
                    var resArr = [];
                  (util.inspect(results,
                  {colors: true, depth: null}));

                  for(var i=0;i<results.length;i++)
                    {
                        var tempObj = {};
                        tempObj.url = results[i].url;
                        tempObj.snippet = results[i].title;
                        tempObj.thumbnail = results[i].thumbnail.url;
                        tempObj.context = results[i].sourceUrl;

                        resArr.push(tempObj);
                    }
                    console.log(resArr);
                    return callback(null, resArr);
                }
          }
        );
  }

}

module.exports = bingSearchHandler;

Answer 3

Answer №2

Here is an example of how to implement this.

Utilizing callbacks

app.route('/imagesearch/:keyword')
    .get(function (req, res) {
        // Perform async request and pass the callback function
        bingSearchHandler.findImages(req.params, (error, response) => {
            if (error === null) {
                res.json(response);
            }
        });
    });

You will also need to revise your findImages function.

this.findImages = (userInput, callback) => {
    var keyword = userInput.keyword;
    search.images(keyword, {top: 10}, function (err, results) {
        if (err) {
            callback(err);
        }
        else {
            var resArr = [];
            util.inspect(results, {colors: true, depth: null}); 

            for(var i = 0; i < results.length; i++) {
                var tempObj = {};
                tempObj.url = results[i].url;
                tempObj.snippet = results[i].title;
                tempObj.thumbnail = results[i].thumbnail.url;
                tempObj.context = results[i].sourceUrl;

                resArr.push(tempObj);
            }
            callback(null, resArr);
        }
   });
}

Using promises

app.route('/imagesearch/:keyword')
    .get(function (req, res) {
        // Perform async request and use a promise
        bingSearchHandler.findImages(req.params).then(response => 
            res.json(response);
        });
    });


// Images function
this.findImages = (userInput) => {
    return new Promise((resolve, reject) => {
        var keyword = userInput.keyword;
        search.images(keyword, {top: 10}, function (err, results) {
            if (err && typeof reject === 'function') {
                reject(err);
            }
            else {
                var resArr = [];
                util.inspect(results, {colors: true, depth: null}); 

                for(var i = 0; i < results.length; i++) {
                    var tempObj = {};
                    tempObj.url = results[i].url;
                    tempObj.snippet = results[i].title;
                    tempObj.thumbnail = results[i].thumbnail.url;
                    tempObj.context = results[i].sourceUrl;

                    resArr.push(tempObj);
                }
                if (typeof resolve === 'function') {
                    resolve(resArr);
                }
            }
        });
    });
}

Answer 4

Here is an example of how to implement this.

Utilizing callbacks

app.route('/imagesearch/:keyword')
    .get(function (req, res) {
        // Perform async request and pass the callback function
        bingSearchHandler.findImages(req.params, (error, response) => {
            if (error === null) {
                res.json(response);
            }
        });
    });

You will also need to revise your findImages function.

this.findImages = (userInput, callback) => {
    var keyword = userInput.keyword;
    search.images(keyword, {top: 10}, function (err, results) {
        if (err) {
            callback(err);
        }
        else {
            var resArr = [];
            util.inspect(results, {colors: true, depth: null}); 

            for(var i = 0; i < results.length; i++) {
                var tempObj = {};
                tempObj.url = results[i].url;
                tempObj.snippet = results[i].title;
                tempObj.thumbnail = results[i].thumbnail.url;
                tempObj.context = results[i].sourceUrl;

                resArr.push(tempObj);
            }
            callback(null, resArr);
        }
   });
}

Using promises

app.route('/imagesearch/:keyword')
    .get(function (req, res) {
        // Perform async request and use a promise
        bingSearchHandler.findImages(req.params).then(response => 
            res.json(response);
        });
    });


// Images function
this.findImages = (userInput) => {
    return new Promise((resolve, reject) => {
        var keyword = userInput.keyword;
        search.images(keyword, {top: 10}, function (err, results) {
            if (err && typeof reject === 'function') {
                reject(err);
            }
            else {
                var resArr = [];
                util.inspect(results, {colors: true, depth: null}); 

                for(var i = 0; i < results.length; i++) {
                    var tempObj = {};
                    tempObj.url = results[i].url;
                    tempObj.snippet = results[i].title;
                    tempObj.thumbnail = results[i].thumbnail.url;
                    tempObj.context = results[i].sourceUrl;

                    resArr.push(tempObj);
                }
                if (typeof resolve === 'function') {
                    resolve(resArr);
                }
            }
        });
    });
}

Implementing promises in my MEAN stack application

Answer №1

Answer №2

Similar questions

How can I convert an Array into a Dictionary using JavaScript?

Using the get method instead of delete in an express application

Adjusting the transparency of the object's interior

Transmitting text data within Google Analytics

Adjusting the sound levels of an HTML audio element using JavaScript

Retrieving selections from a group of checkboxes and managing their addition or removal in an array

What is the best way to implement jQuery after new elements have been added to the DOM?

Deleting a button from a list item or array in Angular 12

The method firebaseApp.auth does not exist in user authentication using Firebase

$scope variables, ng-hide/show directive

What could be the reason why I am unable to choose my radio button? What error am I

Choosing the parent folder that is at least two levels above in JavaScript

Is it a Mozilla Firefox glitch or something else?

What is the best approach to transfer information from the client side to a node

Transform text that represents a numerical value in any base into an actual number

Why is the React onClick method returning undefined upon the first selection, and why are the values being passed not consistent with

"Integrating Laravel 5.4 Backend with Angular 5 Frontend: A Step-by-Step

What is the best way to manage data that arrives late from a service?

Encountered an error with ng build --prod while attempting to import a JavaScript file within the app module

Firebase Error: Trying to access properties of null object (indexOf)