I am trying to return the values from the object of Promises, the values are printed in the console but when I am displaying it on the HTML, it is showing “OBJECT PROMISE” in place of the returned Value. My code is
const priceConversion = async(data) =>{
const url = 'http://www.geoplugin.net/json.gp?'
const response = await fetch (url)
const resJSON = await response.json()
const val = resJSON['geoplugin_currencySymbol'] + Math.round(data * resJSON['geoplugin_currencyConverter'])
return val
}
The type of val returned is String here. but as soon as it is called from an object, it gives the above mentioned output, i.e “Object Promise” The code for the Object is
let price = {
basic:{
monthly: priceConversion(0),
annual:priceConversion(0)
},
standard:{
monthly:priceConversion(9),
annual:priceConversion(4.5),
},
premium:{
monthly:priceConversion(17),
annual:priceConversion(7)
}
}
For Document manipulation, I am using the following method
let monthly = true
if (monthly === true){
$("#freeMonthly").empty().text(`${price.basic.monthly}`)
$("#standardMonthly").empty().text(`${price.standard.monthly}`)
$("#premiumMonthly").empty().text(`${price.premium.monthly}`)
}
It would be really great if anyone could help with this one as I couldn’t find any solution that could resolve this issue. Thank You!
Advertisement
Answer
Try to wrap everything in an async function and use await every time you call your function:
const priceConversion = async(data) => {
const url = 'http://www.geoplugin.net/json.gp?'
const response = await fetch(url)
const resJSON = await response.json()
const val = resJSON['geoplugin_currencySymbol'] + Math.round(data * resJSON['geoplugin_currencyConverter'])
return val
}
const calculatePrice = async() => {
return {
basic: {
monthly: await priceConversion(0),
annual: await priceConversion(0)
},
standard: {
monthly: await priceConversion(9),
annual: await priceConversion(4.5),
},
premium: {
monthly: await priceConversion(17),
annual: await priceConversion(7)
}
}
}
const main = async() => {
try {
console.log("In the main")
const price = await calculatePrice()
let monthly = true
if (monthly === true) {
$("#freeMonthly").empty().text(`${price.basic.monthly}`)
$("#standardMonthly").empty().text(`${price.standard.monthly}`)
$("#premiumMonthly").empty().text(`${price.premium.monthly}`)
}
} catch (err) {
console.log(err)
}
}
main()<html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <div id="freeMonthly">freeMonthly</div> <div id="standardMonthly">standardMonthly</div> <div id="premiumMonthly">premiumMonthly</div> </body> </html>