CODEWITHSUNDEEP
javascriptscope
mko
mko

Reputation: 22064

Can't access variable outside the function scope in JS

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

Upvotes: 0

Views: 1929

Answers (2)

DontVoteMeDown
DontVoteMeDown

Reputation: 21465

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
        })
    });
});

Upvotes: 2

KJ Price
KJ Price

Reputation: 5964

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!");
            })
        }
    }
});

Upvotes: -1

Related Questions