How do i make an async ajax request return a value on completion using OOP?

Question

Please help me with the code below.

I want the object 'airported' to return a list of airports, but currently I can't get it to return the data after the each loop has finished it's iteration of finding 'li's in the list.html (received via ajax)

The airported object is using an instantiation of the Airport class. I don't want any complex code anywhere else in my application. I just want to call 'airport.list()' and get the list of airports.

list.html is for reference only. You don't have to study it. Also I HAVE to use it, I can't have a pretty JSON or anything like that.

Javascript

   function Airport() {

        this.list = function() {

            var airportList = []

            var promise = this.data();

            promise.success(function(data){

                var list = data;

                var listSize = $(data).find('li').size();

                $.each($(list).find("li"), function(key,val) {

                    airportList.push(val);

                    if(listSize == key+1) {

                        console.log(airportList);

                        return false;

                    }

                });

            })

            return airportList;

        };

        this.data = function() {

            return $.ajax({
                url: "/list.html"
            })

        };

    }

    var airported = new Airport();

    console.log('airported', airported.list());

list.html

<html>
<head></head>
<body>
<div id="listautocomp" style="background:white">
    <ul id="ulSuggest">
        <li style="padding:0px;">
            <div id="WAS|0|0***&lt;b&gt;WAS&lt;/b&gt; - &lt;b&gt;Was&lt;/b&gt;hington All Airports, District of Columbia, United States"
                 onclick="SetLocationStrings(this.id)" onmouseover="SuggestMouseOver(this)"><span class="airporticon"
                                                                                                  style="visibility:hidden;;"></span><b>WAS</b>
                - <b>Was</b>hington All Airports, District of Columbia, United States
            </div>
        </li>
        <li style="padding:0px;">
            <div id="SEA|1|0***SEA - Seattle/Tacoma, &lt;b&gt;Was&lt;/b&gt;hington, United States"
                 onclick="SetLocationStrings(this.id)" onmouseover="SuggestMouseOver(this)"><span class="airporticon"
                                                                                                  style="visibility:visible;;"></span>SEA
                - Seattle/Tacoma, <b>Was</b>hington, United States
            </div>
        </li>
        <li style="padding:0px;">
            <div id="SEA|0|0***SEA - Seattle All Airports, &lt;b&gt;Was&lt;/b&gt;hington, United States"
                 onclick="SetLocationStrings(this.id)" onmouseover="SuggestMouseOver(this)"><span class="airporticon"
                                                                                                  style="visibility:hidden;;"></span>SEA
                - Seattle All Airports, <b>Was</b>hington, United States
            </div>
        </li>
        <li style="padding:0px;">
            <div id="IAD|1|0***IAD - &lt;b&gt;Was&lt;/b&gt;hington Dulles, District of Columbia, United States"
                 onclick="SetLocationStrings(this.id)" onmouseover="SuggestMouseOver(this)"><span class="airporticon"
                                                                                                  style="visibility:visible;;"></span>IAD
                - <b>Was</b>hington Dulles, District of Columbia, United States
            </div>
        </li>
        <li style="padding:0px;">
            <div id="DCA|1|0***DCA - &lt;b&gt;Was&lt;/b&gt;hington National, District of Columbia, United States"
                 onclick="SetLocationStrings(this.id)" onmouseover="SuggestMouseOver(this)"><span class="airporticon"
                                                                                                  style="visibility:visible;;"></span>DCA
                - <b>Was</b>hington National, District of Columbia, United States
            </div>
        </li>
        <li style="padding:0px;">
            <div id="GEG|1|0***GEG - Spokane, &lt;b&gt;Was&lt;/b&gt;hington, United States"
                 onclick="SetLocationStrings(this.id)" onmouseover="SuggestMouseOver(this)"><span class="airporticon"
                                                                                                  style="visibility:visible;;"></span>GEG
                - Spokane, <b>Was</b>hington, United States
            </div>
        </li>
        <li style="padding:0px;">
            <div id="GEG|0|0***GEG - Spokane All Airports, &lt;b&gt;Was&lt;/b&gt;hington, United States"
                 onclick="SetLocationStrings(this.id)" onmouseover="SuggestMouseOver(this)"><span class="airporticon"
                                                                                                  style="visibility:hidden;;"></span>GEG
                - Spokane All Airports, <b>Was</b>hington, United States
            </div>
        </li>
        <li style="padding:0px;">
            <div id="PSC|1|0***PSC - Pasco, &lt;b&gt;Was&lt;/b&gt;hington, United States"
                 onclick="SetLocationStrings(this.id)" onmouseover="SuggestMouseOver(this)"><span class="airporticon"
                                                                                                  style="visibility:visible;;"></span>PSC
                - Pasco, <b>Was</b>hington, United States
            </div>
        </li>
        <li style="padding:0px;">
            <div id="BLI|1|0***BLI - Bellingham, &lt;b&gt;Was&lt;/b&gt;hington, United States"
                 onclick="SetLocationStrings(this.id)" onmouseover="SuggestMouseOver(this)"><span class="airporticon"
                                                                                                  style="visibility:visible;;"></span>BLI
                - Bellingham, <b>Was</b>hington, United States
            </div>
        </li>
        <li style="padding:0px;">
            <div id="YKM|1|0***YKM - Yakima Air Terminal, &lt;b&gt;Was&lt;/b&gt;hington, United States"
                 onclick="SetLocationStrings(this.id)" onmouseover="SuggestMouseOver(this)"><span class="airporticon"
                                                                                                  style="visibility:visible;;"></span>YKM
                - Yakima Air Terminal, <b>Was</b>hington, United States
            </div>
        </li>
        <li style="padding:0px;">
            <div id="YKM|0|0***YKM - Yakima All Airports, &lt;b&gt;Was&lt;/b&gt;hington, United States"
                 onclick="SetLocationStrings(this.id)" onmouseover="SuggestMouseOver(this)"><span class="airporticon"
                                                                                                  style="visibility:hidden;;"></span>YKM
                - Yakima All Airports, <b>Was</b>hington, United States
            </div>
        </li>
        <li style="padding:0px;">
            <div id="LKE|0|0***LKE - Seattle LKE Union, &lt;b&gt;Was&lt;/b&gt;hington, United States"
                 onclick="SetLocationStrings(this.id)" onmouseover="SuggestMouseOver(this)"><span class="airporticon"
                                                                                                  style="visibility:hidden;;"></span>LKE
                - Seattle LKE Union, <b>Was</b>hington, United States
            </div>
        </li>
        <li style="padding:0px;">
            <div id="EAT|1|0***EAT - Wenatchee, &lt;b&gt;Was&lt;/b&gt;hington, United States"
                 onclick="SetLocationStrings(this.id)" onmouseover="SuggestMouseOver(this)"><span class="airporticon"
                                                                                                  style="visibility:visible;;"></span>EAT
                - Wenatchee, <b>Was</b>hington, United States
            </div>
        </li>
        <li style="padding:0px;">
            <div id="PUW|1|0***PUW - Pullman, &lt;b&gt;Was&lt;/b&gt;hington, United States"
                 onclick="SetLocationStrings(this.id)" onmouseover="SuggestMouseOver(this)"><span class="airporticon"
                                                                                                  style="visibility:visible;;"></span>PUW
                - Pullman, <b>Was</b>hington, United States
            </div>
        </li>
        <li style="padding:0px;">
            <div id="ALW|1|0***ALW - Walla Walla, &lt;b&gt;Was&lt;/b&gt;hington, United States"
                 onclick="SetLocationStrings(this.id)" onmouseover="SuggestMouseOver(this)"><span class="airporticon"
                                                                                                  style="visibility:visible;;"></span>ALW
                - Walla Walla, <b>Was</b>hington, United States
            </div>
        </li>
        <li style="padding:0px;">
            <div id="MWH|1|0***MWH - Moses Lake, &lt;b&gt;Was&lt;/b&gt;hington, United States"
                 onclick="SetLocationStrings(this.id)" onmouseover="SuggestMouseOver(this)"><span class="airporticon"
                                                                                                  style="visibility:visible;;"></span>MWH
                - Moses Lake, <b>Was</b>hington, United States
            </div>
        </li>
        <li style="padding:0px;">
            <div id="MWH|0|0***MWH - Moses Lake All Airports, &lt;b&gt;Was&lt;/b&gt;hington, United States"
                 onclick="SetLocationStrings(this.id)" onmouseover="SuggestMouseOver(this)"><span class="airporticon"
                                                                                                  style="visibility:hidden;;"></span>MWH
                - Moses Lake All Airports, <b>Was</b>hington, United States
            </div>
        </li>
        <li style="padding:0px;">
            <div id="CLM|1|0***CLM - Port Angeles, &lt;b&gt;Was&lt;/b&gt;hington, United States"
                 onclick="SetLocationStrings(this.id)" onmouseover="SuggestMouseOver(this)"><span class="airporticon"
                                                                                                  style="visibility:visible;;"></span>CLM
                - Port Angeles, <b>Was</b>hington, United States
            </div>
        </li>
        <li style="padding:0px;">
            <div id="OLM|1|0***OLM - Olympia, &lt;b&gt;Was&lt;/b&gt;hington, United States"
                 onclick="SetLocationStrings(this.id)" onmouseover="SuggestMouseOver(this)"><span class="airporticon"
                                                                                                  style="visibility:visible;;"></span>OLM
                - Olympia, <b>Was</b>hington, United States
            </div>
        </li>
        <li style="padding:0px;">
            <div id="PAE|1|0***PAE - Everett, &lt;b&gt;Was&lt;/b&gt;hington, United States"
                 onclick="SetLocationStrings(this.id)" onmouseover="SuggestMouseOver(this)"><span class="airporticon"
                                                                                                  style="visibility:visible;;"></span>PAE
                - Everett, <b>Was</b>hington, United States
            </div>
        </li>
    </ul>
</div>
</body>
</html>

You want a list of airports in text? in JSON? in HTML? what is the format you want? — Luan Castro, Aug 27 '13 at 21:42
I want to return the airportList array which is an array of 'li' elements found in the response. It doesn't matter if its text,JSON, or HTML -- that's not the scope of the question. — CarbonDry, Aug 27 '13 at 21:48
Just to add, console.log(airportList) in the each loop works fine. That's not the problem. The problem I am having is trying to find out how to return it as an object outside of the class. — CarbonDry, Aug 27 '13 at 21:50
I replied with the fix, the problem is that the promisse is asynchronous and when you invoke the return list has not yet been completed ... — Luan Castro, Aug 27 '13 at 22:00
possible duplicate of [How to return the response from an AJAX call?](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call) — Felix Kling, Feb 06 '14 at 07:54

score 1 · Accepted Answer · answered Aug 27 '13 at 21:54

Ok the promisse will not work sync, because you're returning before get the data... you need pass a callback to receive the data.

the promisse is async you can do like below.

function Airport() {

    this.list = function(callback) {

        var airportList = []

        var promise = this.data();

        promise.success(function(data){

            var list = data;

            var listSize = $(data).find('li').size();

            $.each($(list).find("li"), function(key,val) {

                airportList.push(val);

                if(listSize == key+1) {

                    console.log(airportList);

                    return false;

                }

            });

            if( typeof callback === "function" ){


               callback(airportList); //the return is here really, but async

            }

        })

        //return airportList; the return is empty here.

    };

    this.data = function() {

        return $.ajax({
            url: "/list.html"
        })

    };

}

var airported = new Airport();

airported.list(function(airportList){
     console.log('airported', airportList);
});

How do i make an async ajax request return a value on completion using OOP?

1 Answers1