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

Answer 1

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.