Knockout: How to put $.get into a function? - ajax

Question

I am using getJSON in my knockout view:
$.getJSON("/GetItems", function (data) {
self.Items(data.map(viewModelFromData));
});
I want to make it a function for reuse so next time I can reload items on page action. How to do it?
When I tried:
self.getBasketItems = $.getJSON("/umbraco/Surface/Booking/GetBasketItems",
function(data) {
self.Items(data.map(viewModelFromData));
// or return data.map(viewModelFromData);
});
I got self.getBasketItems() is undefined.

Answer 1

The quickest fix:
self.getBasketItems = function() {
return $.getJSON(
"/umbraco/Surface/Booking/GetBasketItems",
function(data) {
self.Items(data.map(viewModelFromData));
});
};
This returns the promise, so you can use it in a chain like so:
self.getBasketItems().then(function() { console.log(self.Items()); })
You can also make a more general utility function like:
const getTransformWrite = (url, converter, target) =>
() =>
$.getJSON(url)
.then(converter)
.then(target);
}
}
self.getBasketItems = getTransformWrite(
"/umbraco/Surface/Booking/GetBasketItems",
data => data.map(viewModelFromData),
self.Items
);
I don't really think this is an improvement, but it might suit your style.
Make sure you don't forget to handle exceptions/errors!

Answer 2

what #haim770 suggested was this:
self.getBasketItems = function() {
return $.getJSON(
"/umbraco/Surface/Booking/GetBasketItems",
function(data) {
self.Items(data.map(viewModelFromData));
});
};
But, from your comments, it seems you're trying to actually return the value into self.getBasketItems? In that case, you will need to do a synchronous call (getJSON is asynchronous) using the $.ajax method instead.
self.getBasketItems = function() {
var _r;
$.ajax(
dataType: "json",
async: false,
url: "/umbraco/Surface/Booking/GetBasketItems",
success: function(data) {
_r = self.Items(data.map(viewModelFromData));
});
return _r
};
Please note that this second solution is very quirky. And the browser will actually hang waiting for the response from the server. You would be better of using either callbacks or promises.
Let me know if this helps!
Cheers,