How do I return a response from an AJAX call in a KnockoutJS component function?

Question

I run a small Magento store and would like to extend my Checkout with some functionality. Magento uses KnockoutJS and I want to extend a KnockoutJS component with a simple function that returns either true or false depending on the response of an AJAX call:

isEnabled: function () {
    var result = false;
    $.getJSON('/mycontroller/checkEnabled', function(response) {
        // response from the controller is simply "true" or "false", in this case "true"
        result = response
    })
    return result
}

Unfortunately this always returns false, even if the response of the getJSON is "true". It's because of the AJAX call being asynchronous I think and the return result being executed immediately instead of waiting for the AJAX to complete.

I have already googled how to solve this and tried a myriad of different solutions over the past hours, async / await, promises, callbacks (from here), but I just don't understand how to get the response value back into my isEnabled function after the AJAX call is finished.

This is really making my head hurt, as I only have experience with synchronous programming languages so far.

How do I make the isEnabled simply return the boolean value from the getJSON AJAX call?

Nathan Fisher · Answer 1 · 2020-08-29T02:49:58.897

I would separate the two.

have an isEnabled property that represents the current state
and a function that retrieves the necessary data from the server to determine the Enabled state and sets the isEnabled observable when the promise is returned.

something like this.

function ViewModel() {
  var self = this;
  self.isEnabled = ko.observable(false);
  self.checkIfEnabled = function() {
    //To simulate getting data from a server
    setTimeout(function() {
      //promise has returned, so set the value of enabled.
      self.isEnabled(!self.isEnabled());
    }, 1000);
  }
}

ko.applyBindings(new ViewModel());

.is-enabled {
  background-color: #FFFF00;
  color: #000000;
}

.is-not-enabled {
  background-color: #000000;
  color: #FFFF00;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<button data-bind="click: checkIfEnabled">Check State</button>

<div data-bind="css:{'is-enabled': isEnabled, 'is-not-enabled': !isEnabled() }">This should change color.  Current State: <span data-bind="if: isEnabled">Enabled</span><span data-bind="ifnot: isEnabled">Disabled</span></div>

How do I return a response from an AJAX call in a KnockoutJS component function?

1 Answers1