How to correctly implement a .then promise [duplicate] - javascript

This question already has answers here:
How do I return the response from an asynchronous call?
(41 answers)
How do I convert an existing callback API to promises?
(24 answers)
Closed 5 years ago.
How could I implement a .then promise, so once this function runs I have something inside of the array?
I can console.log the results into the function and I believe it returns the results correctly, however the res.json results will show an empty array. Which I assume is because it loads quicker than the function finishes.
const {grabArticles} = require('../controller/update.js');
// variables
const router = express.Router();
router.get('/new', (err, res) => {
const results = [];
const test = grabArticles(results)
test.then((results) => {
res.json(results);
})
});
//different file
const request = require('request');
const cheerio = require('cheerio');
grabArticles = (results) => {
// const results = [];
request("https://fivethirtyeight.com/", function(error, response, html) {
const $ = cheerio.load(html);
for (x=1; x<4; x++) {
// i is the current loop number, element=this is the current data requested
$('#home-feature-' + x.toString()).each((i, element) => {
const topic = $(element).children('.post-info').children('.topic').text().trim();
const title = $(element).children('.post-info').children('.tease-meta').children('.tease-meta-content').children('h2.article-title.entry-title').text().trim();
// console.log('topic: ' + topic + '\n' + 'title: ' + title);
const newArticle = {
topic: topic,
title: title
};
results.push(newArticle);
})
}
console.log('inside update.js' + results);
});
return results;
}

You need to return a Promise, which then resolves the results. The value of results will then be passed to your then callback as the first parameter.
Untested but it will look something like this:
//different file
const request = require('request');
const cheerio = require('cheerio');
grabArticles = (results) => {
// const results = [];
return new Promise(function(resolve) {
request("https://fivethirtyeight.com/", function(error, response, html) {
const $ = cheerio.load(html);
for (x = 1; x < 4; x++) {
// i is the current loop number, element=this is the current data requested
$('#home-feature-' + x.toString()).each((i, element) => {
const topic = $(element).children('.post-info').children('.topic').text().trim();
const title = $(element).children('.post-info').children('.tease-meta').children('.tease-meta-content').children('h2.article-title.entry-title').text().trim();
// console.log('topic: ' + topic + '\n' + 'title: ' + title);
const newArticle = {
topic: topic,
title: title
};
results.push(newArticle);
})
}
console.log('inside update.js' + results);
//////////////////////////
/// Resolve the promise here
/// the then() will get triggered
//////////////////////////
resolve(results);
});
});
}
A very simplified version would look like this:
// This function returns a Promise
function doSomethingAysnc(){
return new Promise(function(resolve){
request('/my/url', function(data){
// When we are staisfied with ending the promise
// We resolve it so the calling function can then
// handle the rest
return resolve(data);
});
});
}
// Here we will call our async function
// Once the promise resolves
// We get our data back for further usage
doSomethingAysnc().then(function(data){
// We can the access the data here
console.log(data);
});

Rewrite your grabArticles using Promise like this.
grabArticles = (results) => {
return new Promise((resolve, reject) => {
request("https://fivethirtyeight.com/", function(error, response, html) {
const $ = cheerio.load(html);
for (x=1; x<4; x++) {
// i is the current loop number, element=this is the current data requested
$('#home-feature-' + x.toString()).each((i, element) => {
const topic = $(element).children('.post-info').children('.topic').text().trim();
const title = $(element).children('.post-info').children('.tease-meta').children('.tease-meta-content').children('h2.article-title.entry-title').text().trim();
// console.log('topic: ' + topic + '\n' + 'title: ' + title);
const newArticle = {
topic: topic,
title: title
};
results.push(newArticle);
})
}
console.log('inside update.js' + results);
// return result using resolve, otherwise using reject(error) to reflect something wrong
resolve(results);
});
});
}

Related

Node JS function that return https get request final edited data

Hello everybody I have a problem with the Node JS function that I want it to return https get request final edited data, I know there are a lot of solutions for this async problem but I tried them all and still can't figure out what is wrong with my code?
here is my function without any other solutions editing:
function getMovie(apiKey, gen) {
const baseUrl = "https://api.themoviedb.org/3/discover/movie?api_key=" + apiKey + "&language=en-US&include_adult=false&include_video=false&page=1&with_genres=" + gen;
https.get(baseUrl, function (responce) {
console.log(responce.statusCode);
var d = "";
responce.on("data", function (data) {
d += data;
});
responce.on("end", () => {
const finalData = [];
const moviesData = JSON.parse(d);
const result = moviesData.results;
const maxx = result.length;
const rand = Math.floor(Math.random() * maxx);
const title = result[rand].title;
const rDate = result[rand].release_date;
const overview = result[rand].overview;
const imageRoot = result[rand].poster_path;
const movieId = result[rand].id;
const movieRating = result[rand].vote_average;
// here will push those variables to finalData array
// then return it
return finalData;
});
}).on('error', (e) => {
console.error(e);
});
}
and want after this finalData returns:
const finalResult = getMovie(apiKey, genre);
it always returns undefined, How can I fix this? please anyone ca help me with this problem
thanks in advance.
I solved this problem using promises using this code:
const rp = require('request-promise');
function getMovie(url) {
// returns a promise
return rp(url).then(body => {
// make the count be the resolved value of the promise
let responseJSON = JSON.parse(body);
return responseJSON.results.count;
});
}
getMovie(someURL).then(result => {
// use the result in here
console.log(`Got result = ${result}`);
}).catch(err => {
console.log('Got error from getMovie ', err);
});

Promise returns undefined - loop inside Promise

In my application I have a function that returns a promise. What I do inside that function is, waiting for an image in DOM to be available and extract that element to generate base64 data of it.
getCodesOfOneMerchant(merchantDataEntry: MerchantData) {
var codesOfMerchant = [];
return new Promise(async (resolve, reject) => {
for (let index = 0; index < merchantDataEntry.qrPayloadList.length; index++) {
const value = merchantDataEntry.qrPayloadList[index];
const payLoad = value.qrPayload
this.qrvalue = payLoad;
while (!document.querySelector(".qrcode img")) {
await new Promise(r => setTimeout(r, 500));
console.log("waiting for qr");
}
console.log("QR element is available");
const qrEle = document.getElementById('qrcode');
let imgBase64Data = this.getBase64Image(qrEle.firstChild.firstChild);
console.log('Base64 = ' + imgBase64Data);
var qrName = merchantDataEntry.serviceName + "-" + value.branch + "-" + value.mobile;
let userQr: UserQr = new UserQr();
userQr.name = qrName;
userQr.qr = imgBase64Data;
codesOfMerchant.push(userQr);
console.log('1')
if (index == merchantDataEntry.qrPayloadList.length - 1) {
resolve();
}
}
console.log('2')
console.log('Returning data = ' + JSON.stringify(codesOfMerchant));
return codesOfMerchant;
});
}
Following is the function which calls above one.
async downloadQrCodesOfAllSelectedMerchants() {
var qrCodesForAllMerchants = [];
const filteredData = this.merchantDataList.filter(entry => entry.qrSelected);
const promises = filteredData.map(async (value) => {
const qrCodesOfMerchant = await this.getCodesOfOneMerchant(value);
return qrCodesOfMerchant;
});
const qrCodesOfAll = await Promise.all(promises);
console.log('HELLO');
console.log(qrCodesOfAll); // this prints undefined
console.log('DONE')
}
Even though I have returned the promise inside the first method, the calling function still receives undefined. I cannot understand what is wrong there.
As you can see, I just log the data to return to the console inside the second function just before returning. Data is there.
Can someone please help me here. Thank You..!
You'll want to remove the return new Promise(async (resolve, reject) => { line and just make getCodesOfOneMerchant itself async:
async getCodesOfOneMerchant(merchantDataEntry: MerchantData) { /*
^^^^^ */
const codesOfMerchant = [];
for (const value of merchantDataEntry.qrPayloadList) {
this.qrvalue = value.qrPayload;
while (!document.querySelector(".qrcode img")) {
await new Promise(r => setTimeout(r, 500));
console.log("waiting for qr");
}
console.log("QR element is available");
const qrEle = document.getElementById('qrcode');
let imgBase64Data = this.getBase64Image(qrEle.firstChild.firstChild);
console.log('Base64 = ' + imgBase64Data);
const userQr: UserQr = new UserQr();
userQr.name = merchantDataEntry.serviceName + "-" + value.branch + "-" + value.mobile;
userQr.qr = imgBase64Data;
codesOfMerchant.push(userQr);
}
return codesOfMerchant;
}
In the callee function in the below code
const promises = filteredData.map(async (value) => {
const qrCodesOfMerchant = await this.getCodesOfOneMerchant(value);
return qrCodesOfMerchant;
});
you are already awaiting for the response of the method getCodesOfOneMerchant, which will resolve the promise there itself.
Instead, you just need to dump all the promises in the promises array and await all of them once using Promise.all(promises)
const promises = filteredData.map(value => this.getCodesOfOneMerchant(value))
const qrCodesOfAll = await Promise.all(promises);
This will give qrCodesOfAll as an array of resolved promises
Also, the executor function is returning a promise but the promise is never resolved. The returned values from the promise i.e codesOfMerchant will never be received by the callee. You will need to resolve that promise by using
resolve(codesOfMerchant)
which will now return the value of codesOfMerchant to the callee

using promises and async for protobufjs loadcall

I am trying to figure out the best way to re-write the following code:
var api = function(id, contract) {
var callback = function (error, root) {
if (error)
throw error;
var by = Buffer.from(contract,'base64')
var es = root.lookupType("Contract")
var esMsg = es.decode(by)
var esBytes = es.encode(esMsg).finish()
signature = id.sign(esBytes).toString('base64')
}
return new Promise((resolve, reject) => {
protobuf.load("contract.proto", callback)
})
}
var signContract = async(privateKey, contract) => {
let signature
var id = await crypto.keys.unmarshalPrivateKey(Buffer.from(privateKey, 'base64'))
result = await api(id,contract,signature)
}
function getSessionSignature (hash, time) {
return config.id + ":" + hash + ":" + time
}
module.exports = configure(({ ky }) => {
return async function * signbatch (input, options) {
var contracts = input.Contracts
for (var i = 0 ; i < contracts.length ; i++) {
contracts[i].contract = await signContract(config.PrivKey, contracts[i].contract)
}
//add signed contracts to the searchParams
searchParams.append("arg", JSON.stringify(contracts))
let res
res = await ky.post('storage/upload/signbatch', {
searchParams
}).json()
yield JSON.stringify({})
} else {
yield JSON.stringify({error:"Private key not found"})
}
}
})
My issue is how do I write the sign async code to pass in privateKey and contract variables to api var function and return the signature back to the result variable to be assigned to contracts[i].contract ? Please note that the id.sign(..) function is Promise inside the callback function.
You need to resolve the promise in the api function, the docs suggest you could use the single argument variant here, e.g.
var root = await protobuf.load("contract.proto");
... // (The code you currently by have in 'callback'
return signature;
As the generator is async, yield will emit a Promise which you can (obviously) handle with either .then or await

How can i make a synchronous response to a GET method in JavaScript [duplicate]

This question already has answers here:
How do I return the response from an asynchronous call?
(41 answers)
Closed 3 years ago.
I want to respond a JSON object to a path (e.g. /getAbsencesWithNames). I have used the includeNames() function to read data from a JSON file, process it and save it in a the global JSON object i am trying to respond. The problem is the following command res.end(JSON.stringify(temp, null, "\t")); executes asynchronously since there is I/O code within includeNames() function. How can i make this command wait for my function to complete, in other words make it run synchronously?
function includeNames(){
members().then(membersPayload => {
// var counter = 1;
for (var i in respondJson){
var absencesID = respondJson[i].userId;
for (var j in membersPayload){
var membersID = membersPayload[j].userId;
if (absencesID == membersID){
var nameValue = membersPayload[j].name;
JSON.stringify(nameValue);
respondJson[i]["name"] = nameValue;
// console.log(counter + ": " + membersPayload[j].name);
// counter++;
break;
}
}
}
console.log("ITERATION COMPLETED");
}).catch((err) => console.error('error: ' + error.message));
return respondJson;
};
app.get('/getAbsencesWithNames', async (req, res) => {
var temp = await includeNames();
res.end(JSON.stringify(temp, null, "\t"));
console.log("RESPOND SENT");
});
Console output is:
RESPOND SENT
ITERATION COMPLETED
When i was expecting:
ITERATION COMPLETED
RESPOND SENT
You have to rewrite your function to return Promise.
function includeNames() {
return new Promise((resolve, reject) => {
members().then(membersPayload => {
// var counter = 1;
for (var i in respondJson){
var absencesID = respondJson[i].userId;
for (var j in membersPayload){
var membersID = membersPayload[j].userId;
if (absencesID == membersID){
var nameValue = membersPayload[j].name;
JSON.stringify(nameValue);
respondJson[i]["name"] = nameValue;
// console.log(counter + ": " + membersPayload[j].name);
// counter++;
break;
}
}
}
resolve(respondJson)
console.log("ITERATION COMPLETED");
})
});
};
// you cant use it as you're using
const result = await includeNames()
// or with Promise chain
includeNames().then(result => console.log(result))

Uncaught (in promise) TypeError: Cannot read property 'length' of undefined at promiseKey.then

I am trying to return an array of pushed data from promise, then loop multiple times to populate all data. For instance, I got a list of brands and a function to take in brand parameter and return an array of pushed data.
var datasetarr = [];
brandlist = ['Bh', 'Ruffles'];
let promiseKey = new Promise((resolve, reject) => {
for(var i = 0; i < brandlist.length; i++){
datasetarr = populateData(brandlist[i], datasetarr);
}
resolve(datasetarr);
});
promiseKey.then((arr) => {
console.log('complete promise');
for(var i = 0; i < arr.length; i++){
console.log(arr[i].date + ' ' + arr[i].total);
}
});
The error message is
Uncaught (in promise) TypeError: Cannot read property 'length' of undefined
at promiseKey.then
My data fetching has no problem as I managed to print out the details. This means that the promise is not resolve properly. Is that the correct way to return an array from promise? I not sure which part was wrong.
Firstly, your populateData needs to return a Promise - in this case, it would be the resolved array of promises created in data.forEach
var brandlist = ['Bh', 'Ruffles'];
let promiseKey = Promise.all(brandlist.map(brand => populateData(brand)))
.then(results => [].concat(...results)); // flatten the array of arrays
promiseKey.then((arr) => {
console.log('complete promise');
for(var i = 0; i < arr.length; i++){
console.log(arr[i].date + ' ' + arr[i].total);
}
});
function populateData(brand, datasetarr) {
console.log('go in');
var query;// = // query by brand parameter
return query.once('value').then(data => {
var promises = [];
data.forEach(snapshot => {
// get each receipt item details
// get receipt details by receipt ID
var query;// = // query receipts
promises.push(query.once('value').then(data => {
// removed code
// managed to print out here so data fetching is not a problem
console.log(brand + ' ' + date + ' ' + itemTotal);
return {date: date, total: itemTotal};
}));
});
return Promise.all(promises);
});
}
Or, using the snapshotToArray function I gave you in this answer a week ago
const snapshotToArray = snapshot => {
const ret = [];
snapshot.forEach(childSnapshot => {
ret.push(childSnapshot);
});
return ret;
};
function populateData(brand, datasetarr) {
console.log('go in');
var query;// = // query by brand parameter
return query.once('value').then(data => Promise.all(snapshotToArray(data).map(snapshot => {
// get each receipt item details
// get receipt details by receipt ID
var query;// = // query receipts
return query.once('value').then(data => {
// removed code
// managed to print out here so data fetching is not a problem
console.log(brand + ' ' + date + ' ' + itemTotal);
return {date: date, total: itemTotal};
});
})));
}
While it's possible to work with a global datasetarray variable to which you push from anywhere, I would recommend against it. Instead, write a method getData that returns (a promise for) an array, and after calling that multiple times (once for every brand) you concatenate them together.
const brandlist = ['Bh', 'Ruffles'];
const promiseKey = Promise.all(brandlist.map(getData)).then(arrays => [].concat(...arrays));
promiseKey.then(arr => {
console.log('complete promise');
for (const item of arr)
console.log(item.date + ' ' + item.total);
});
function getData(brand) { // no array parameter!
console.log('go in');
const query = …; // query by brand parameter
return query.once('value').then(data => {
const promises = toArray(data).map(snapshot => {
const query = …; // get receipt item details by receipt ID
return query.once('value').then(data => {
…
return {date: date, total: itemTotal}; // don't push, just return the result
});
return Promise.all(promises); // resolves with an array of results
}); // resolves with that same result array
}
function toArray(forEachable) {
const arr = [];
forEachable.forEach(x => { arr.push(x); });
return arr;
}

Categories

Resources