Can't access variable outside the function scope in JS

Question

Sorry for this noobie question, but I've been searching all the existing answer about shadowing variable, but still can't make my code work

export default Ember.ArrayController.extend({
 actions: {
 generateInvoice: function() {
 var amount1; // declare a variable
 var amount2;
 this.store.find('product', 1).then(function(obj){
 amount1 = 100; //assign value to the amount variable
 });
 this.store.find('product', 2).then(function(obj){
 amount2 = 200; 
 });
 console.log(amount1); // undefined!
 console.log(amount2); // undefined!
 $.post('http://nzud.co.nz/invoice',{
 foo1: amount1, //access variable amount ---doesn't work!!
 foo2: amount2
 } ).done(function(data){
 alert("success!");
 })
 }
 }
});

I've tried a lot of way, but still can't store the model record property into a variable and access from the $.post payload

• adeneo: this.store.find is asynchronous
• mko: @adeneo thanks for pointing it out. I need to learn more about promise

Answer 1

To proceed using the variable new value, you have to put your code inside the promisse then. Then it will work:

export default Ember.ArrayController.extend({
 actions: {
 generateInvoice: function() {
 this.store.find('product', 1).then(function(obj){
 var amount = 100; //assign value to the amount variable
 $.post('http://nzud.co.nz/invoice',{
 foo: amount
 }).done(function(data){
 alert("success!");
 })
 });
 }
 }
});

This happens because the method find is async, so you have to work with its result inside a callback function, in this case the function then. Everything inside generateInvoice scope will (probably) be called before your find method request ends, even if its the first method called inside it.

UPDATE:

I didn't get what you mean with those two find methods for product, 1, but:

• If you have two values in the request to send to the post, you should use the find() method only once:

  this.store.find('product', 1).then(function(obj){
   var amount = 100; //assign value to the amount variable
   $.post('http://nzud.co.nz/invoice',{
   foo: amount,
   bar: another_value
   })
  });
  

• Or if you have to call two differents find methods, you have to chain them:

  this.store.find('product', 1).then(function(obj){
   var amount = 100; //assign value to the amount variable
   this.store.find('product', 1).then(function(obj){
   var another_amount = 100; //assign value to the amount variable
   $.post('http://nzud.co.nz/invoice',{
   foo: amount,
   bar: another_amount
   })
   });
  });
  

• mko: thanks for your quick answer. I just update my question, there are actually two record query promise, so I can't put the $.post into one of these
• DontVoteMeDown: @mko You have to post both values once in the post request?
• mko: Yes, the payload in the $.post contains two value from two asyc record query
• mko: Sorry for the typo, the second is store.find('product',2)
• DontVoteMeDown: @mko In this case, yes. You have no another way to do it. So you start a new request after another finishes and so on...

Answer 2

Declare amount outside of your function:

var amount; // declare a variable
export default Ember.ArrayController.extend({
 actions: {
 generateInvoice: function() {
 this.store.find('product', 1).then(function(obj){
 amount = 100; //assign value to the amount variable
 });
 console.log(amount) // undefined!
 $.post('http://nzud.co.nz/invoice',{
 foo: amount, //access variable amount ---doesn't work!!
 } ).done(function(data){
 alert("success!");
 })
 }
 }
});

• DontVoteMeDown: This maybe call the post function with the amount undefined.
• KJ Price: Not sure what you mean there, but yeah I missed the part of this being async. Amount still doesn't have a value by the time the post function is ran.
• DontVoteMeDown: This is exactly what I mean.