jQuery.get runs after all the rest of the function

Question

Running this code the sequence of Alerts I have is begin, outside, final e inside, how to solve this ??

        addLine(){
            alert('begin')
            jQuery.get('database/addClube/'+this.clube);

            jQuery.get('database/getClubes', function(data){
                this.list = data;
                console.log(this.list);
                alert('inside')
            });

            console.log(this.list);
            alert('outside')
            for(item in this.list){
                //alert(item);
            }

            this.clube = '';
            alert('final')
        },

Answer 1

You could use it like this, as the get may take a while to bring in the data depending on the volume:

         addLine(){
            alert('begin')
            jQuery.get('database/addClube/'+this.clube);

            jQuery.get('database/getClubes', function(data){
                this.list = data;
                console.log(this.list);
                alert('inside');

                for(item in this.list){
                    //alert(item);
                }
            });

            this.clube = '';
            alert('final')
        },

Answer 2

The jQuery.get() method is by default asynchronous, that is, it creates a new thread to download the page in question and continues javascript. The new thread then responds to the download performed by calling its function there.

You can use the method jQuery.get(settings), passing all parameters through an object and one of them being the parameter async. Passing by false for him, the request is not made in another thread and with this awaits the return to continue your script, but may harm the user experience when using the page:

        jQuery.get({
            async: false;
            url: 'database/getClubes',
            success: function(data) {
                this.list = data;
                console.log(this.list);
                alert('inside');

                for(item in this.list){
                    //alert(item);
                }
            },
        });

Or I could try this way:

    jQuery.ajax({
        url: 'database/getClubes',
        success: function(data) {

            this.list = data;
                console.log(this.list);
                alert('inside');

                for(item in this.list){
                    //alert(item);
                }

        },
        error: function(data) {

            // handle the response
            // show the UI again

        }
    }); 

Do the same for the first get() inclusive, however recommend using the post(settings) for modifications, such as adding or updating the base.