How to return values from the Object Promise in Jquery

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
    
  }

JavaScript
​x
 
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)
        }
    }

JavaScript
 
  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}`)
}

JavaScript
 
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!

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()

JavaScript
 
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>

JavaScript
 
<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>

Advertisement

Answer