Why is my method not returning the object

Question

My ajax response is correct but i am unable to return the response object back to my method call. The problem lies in the first part of the if statement. This is my first project with attempts at OOP. Please let me know how to fix this and any other OOP code suggestions are very welcome.

$("#search-btn").on('click', function(e) {
        e.preventDefault();
        searchTerm = $("#search-input").val();
        var params = {'q': searchTerm, 'limit': 13};
        var url = "https://api.twitch.tv/kraken/search/" + searchType + "?";

/*===*/     if(searchType === "games") {
            url = "https://api.twitch.tv/kraken/search/games?type=suggest";
            var gamesSearch = new TwitchApiCall(searchType, searchTerm, params, url);
            var data = gamesSearch.apiCall();//How do i get response from api call here?=====
            console.log(data);//returns undefined================   /*===*/

        //will change these when above works=====================
        } else if (!searchType || searchType === "channels") {
            var defaultSearch = new TwitchApiCall(searchType, searchTerm, params, url);
            defaultSearch.apiCall();
            displaySearchResults(defaultSearch.response.channels);

        } else {
            var streamSearch = new TwitchApiCall(searchType, searchTerm, params, url);
            streamSearch.apiCall();
            displaySearchResults(streamSearch.response.streams);
        }
    });
}

function TwitchApiCall(searchType, searchTerm, params, url) {
    this.params = params;
    this.url = url;

    this.apiCall = function() {
        $.ajax({
            url: this.url,
            data: this.params,

/*===*/     success: function (response) {

                next = response._links.next;
                prev = response._links.prev;
                console.log(response);//returns the object i want==================
            }
        });        /*===*/

        $("#page-title").html("Twitch.tv/" + searchType + "/" + searchTerm);
        $("#sort-pop").addClass('active');
    };
}

Thanks in advance

@PointyIn the method thats holding the click handler. its just above it but i didnt include it. — Dominofoe, Sep 13 '15 at 00:42
`$.ajax` is asynchronous, your code has **at least** two problems. 1) it's written as if `$.ajax` is synchronous, and 2) it's written as if the ajax `response` is saved in the `TwitchApiCall` object ... which it isn't — Jaromanda X, Sep 13 '15 at 00:45
possible duplicate of [How to return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-asynchronous-call) — Sebastian Simon, Sep 13 '15 at 00:48
I guess i messed up with part of the problem. I had my code working but i am trying to refactor in a more efficient way. I need to use TwichApiCall with many different arguments. This is just one way i need to call it. So how can i write this code so that i dont have to write out the ajax call 12 different times? — Dominofoe, Sep 13 '15 at 01:05
@Dominofoe if it's defined in another handler, it's not available in this one. — Pointy, Sep 13 '15 at 02:41

score 1 · Accepted Answer · answered Sep 13 '15 at 02:16

Part of the problem is that this problem might well not be a good fit for the type of OOP you're trying. Or at least there is probably little reason to make an object out of that Twitch thingy.

This is untested, but looks like it might do it, and is much cleaner code:

$("#search-btn").on('click', function(e) {
    e.preventDefault();
    searchTerm = $("#search-input").val();
    var params = {'q': searchTerm, 'limit': 13};
    var url = "https://api.twitch.tv/kraken/search/" + searchType + "?";

    if (searchType === "games") {
        url = "https://api.twitch.tv/kraken/search/games?type=suggest";
        callTwitch(searchType, searchTerm, params, url, function(data) {
            console.log(data);
        })
    } else if (!searchType || searchType === "channels") {
        callTwitch(searchType, searchTerm, params, url, function(data) {
            displaySearchResults(data.channels);
        });
    } else {
        callTwitch(searchType, searchTerm, params, url, function(data) {
            displaySearchResults(data.streams);
        });
    }
});


function callTwitch(searchType, searchTerm, params, url, callback) {
    $.ajax({
        url: url,
        data: params,
        success: function (response) {
            next = response._links.next;
            prev = response._links.prev;
            callback(response);
        }
    });

    $("#page-title").html("Twitch.tv/" + searchType + "/" + searchTerm);
    $("#sort-pop").addClass('active');
}

It is missing error-handling. What happens if the AJAX call has bad data? What if it doesn't return? But it should get you going.

Why is my method not returning the object

1 Answers1