0

Can someone tell me why function f1(foo) and f2(arr) in the following piece of code is not being executed inside the $(document).ready()?

$(document).ready(function() {

var main = function() {
    var foo = //some text;
    var bar = //some text;

    var ARR = [];

    function f1(foo) {
        //matches foo with a reg exp and returns an array;
    }

    function f2(arr) {
        //loops through arr and pushes each element into ARR;
    }

    var Rfoo = f1(foo);
    var Rbar = f1(bar);

    if(/* condition */) {
        f2(Rfoo);
        f2(Rbar);
    }


    var imgArr = [];
    $('img[src *= "some-text"]').each(function() {
        var a = //something;
        var b = a.match(/* reg exp */)[0];
        imgArr.push(b);

        var formData = new FormData();
        formData.append(/* something to do with an apikey */);
        formData.append(/* something to do with b */);

        $.ajax({
            url: //something,
            data: formData,
            /*
            ...
            */
            success: function(data, textStatus, jqXHR) {
                var x = data["some-property"];

                if(x !== null) {
                    $.each(x, function(index, value) {
                        var m = value["property-1"]; //basically it is some text
                        // and a few more initializations...
                        console.log(m); // THIS LINE IS WORKING


                        // THE FOLLOWING 4 LINES OF CODE IS NEVER EXECUTED. WHY IS IT SO?
                        // functions f1, f2 are declared outside $(document).ready() so shouldn't it work inside 
                        // $(document).ready(). Am I doing something wrong here?
                        var Rbaz = f1(m);
                        if(Rbaz.length !== 0) {
                            f2(Rbaz);
                        }
                    })
                }
            },
            error: function(err) {
                //something;
            }
        });
    });

    return ARR;
}

var result = main();
console.log(result); // Showing an empty ARR...Why is it so?

});

I hope I have been able to make the problem appear clear to the reader. I'd like to know if I'm structuring the whole code in the right way. I'm open to hearing your suggestions, if any. Thanks!

  • Your functions are called but you log the result before the asynchronous called is executed – Denys Séguret Jul 13 '16 at 08:38
  • first restucture your code. put the document ready outside the main function that is a bad design – Anonymous Duck Jul 13 '16 at 08:40
  • @Desperado Hi, yeah you're right and I just put the whole code(`main()`) inside a `$(document).ready()` construct but again `main()` returns an _empty_ array. Wonder how is that? –  Jul 13 '16 at 09:24
  • @SunandoSamaddar what did you do, – Anonymous Duck Jul 13 '16 at 09:25
  • @Desperado You can check the code now. I just edited it. –  Jul 13 '16 at 09:35
  • @DenysSéguret You can take a look at the code now. Same problem. `ARR` is empty. I'm using this code inside a content script of a Chrome extension. So what this code does is it first converts `ARR` to an object and sends the object to the extension's `popup.js` script(_I've left out that extra bit of code here for sake of simplicity_) . –  Jul 13 '16 at 09:36
  • @SunandoSamaddar which specific array is empty? `Arr`? – Anonymous Duck Jul 13 '16 at 09:46
  • Yes I'm talking about `ARR`. –  Jul 13 '16 at 10:07
  • @SunandoSamaddar I marked this question as a duplicate for a reason. Do read the linked QA and you'll understand the problem. – Denys Séguret Jul 13 '16 at 11:00
  • @DenysSéguret Thanks for the link. I'm trying to figure it out myself. –  Jul 13 '16 at 11:23

0 Answers0