I need to set yeast_options on my viewmodel in knockoutjs. I am serving the data correctly, but cannot access it with an ajax call. Ajax is not used the way I'd expect. I want to use functions to return what they create, and ajax is requiring to use a "success" function, which is not setting data onto my yeast_options attribute:
self.get_yeasts = function(){
console.log('in get_yeasts...')
// var this_data = null;
var onSuccess = function(data){
alert("It worked!");
alert(data);
alert(self);
console.log(data);
// var this_data = data;
self.yeast_options = data;
return data;
}
var onError = function(error){
alert("oops");
}
var data = $.ajax({
dataType: "json",
url: "http:/127.0.0.1:8000/api/items/yeasts",
success: onSuccess,
error: onError,
});
// });
console.log("about to return the data");
console.log(data);
console.log(data.responseJSON);
// debugger;
return this_data;
}
I've tried several different ways, like returning data from the success function, setting self.yeast_options within the success, and nothing will get the data to it
<script type='text/javascript'>
ko.observableArray.fn.countVisible = function(){
return ko.computed(function(){
var items = this();
if (items === undefined || items.length === undefined){
return 0;
}
var visibleCount = 0;
for (var index = 0; index < items.length; index++){
if (items[index]._destroy != true){
visibleCount++;
}
}
return visibleCount;
}, this)();
};
function Hop(data) {
this.name = ko.observable(data.name || "");
this.amount = ko.observable(data.amount || "");
this.time = ko.observable(data.time || "");
this.use = ko.observable(data.use || "Boil");
}
function Fermentable(data) {
this.name = ko.observable(data.name || "");
this.pounds = ko.observable(data.pounds || "");
this.ounces = ko.observable(data.ounces || "");
this.weight_unit = ko.observable(data.weight_unit || "oz");
this.milling_preference = ko.observable(data.milling_preference || "Milled");
}
function Yeast(data){
var self = this;
var permanent_yeast_options = data.yeast_options;
self.name = ko.observable(data.name || "-");
self.current_filter = ko.observable("-Any-");
self.yeast_groups_individual = ko.computed(function(){
if (self.current_filter() !== "-Any-"){
var options = _.filter(data.yeast_options, function(option){
return option.category === self.current_filter();
});
return options;
} else{
return permanent_yeast_options;
}
}
);
self.yeast_categories = ko.observableArray();
ko.computed(function(){
var starter_list = ['-Any-'];
var categories = _.pluck(permanent_yeast_options, 'category');
var final = starter_list.concat(categories);
self.yeast_categories(final);
})
}
function TaskListViewModel() {
var self = this;
// debugger;
self.dd = function(variable, varName) {
var varNameOutput;
varName = varName || '';
varNameOutput = varName ? varName + ':' : '';
console.log(varNameOutput, variable, ' (' + (typeof variable) + ')');
};
self.get_yeasts = function(){
console.log('in get_yeasts...')
// var this_data = null;
var onSuccess = function(data){
alert("It worked!");
alert(data);
alert(self);
console.log(data);
// var this_data = data;
self.yeast_options = data;
return data;
}
var onError = function(error){
alert("sad panda");
}
var data = $.ajax({
dataType: "json",
url: "http:/127.0.0.1:8000/api/items/yeasts",
success: onSuccess,
error: onError,
});
// });
console.log("about to return the data");
console.log(data);
console.log(data.responseJSON);
// debugger;
// return this_data;
}
// defaults
self.hops_uses = ko.observableArray(['Boil', 'Dry Hop']);
self.weight_units = ko.observableArray(['oz', 'lb']);
self.milling_preferences = ko.observableArray(['Milled', 'Unmilled']);
self.brew_methods = ko.observableArray(['Extract', 'Mini-Mash', 'All Grain', 'Brew-in-a-bag']);
self.recipe_name = ko.observable("");
self.brew_method = ko.observable("Extract");
self.batch_size = ko.observable("5");
self.beer_style = ko.observable("");
self.boil_time = ko.observable(60);
self.hops = ko.observableArray([new Hop({}), new Hop({})]);
self.fermentables = ko.observableArray([new Fermentable({name: 'test'}), new Fermentable({})]);
self.yeast_options = self.get_yeasts();
console.log(self.yeast_options);
self.yeasts = ko.observableArray([new Yeast({yeast_options: self.yeast_options})]);
self.addFermentable = function(){
self.fermentables.push(new Fermentable({}))
}
self.addYeast = function(){
self.yeasts.push(new Yeast({yeast_options: self.yeast_options}));
}
self.addHop = function(){
self.hops.push(new Hop({}));
}
self.removeFermentable = function(fermentable){
self.fermentables.destroy(fermentable);
}
self.removeYeast = function(yeast){
self.yeasts.destroy(yeast);
}
self.removeHop = function(hop){
self.hops.destroy(hop);
}
// http://stackoverflow.com/questions/40501838/pass-string-parameters-into-click-binding-while-retaining-default-params-knockou
self.removeItem = function(item, name){
name.remove(function(hop){
return hop.name === item.name;
});
}
self.name_filter = function(the_array){
var items = _.filter(the_array, function(item){
return item.name() !== "" && item.name() !== "-";
});
return items;
}
self.amount_filter = function(the_array, countable_fields){
var items = _.filter(the_array, function(item){
var count = 0;
for (i = 0; i < countable_fields.length; i++){
var this_number = +item[countable_fields[i]]();
count = count + this_number;
}
return count > 0;
});
return items;
}
self.dual_filter = function(the_array, countable_fields){
items = self.name_filter(the_array);
items = self.amount_filter(items, countable_fields);
return items;
}
self.purify_yeasts = function(yeasts){
var final_yeasts = [];
for (i = 0; i < yeasts.length; i++){
var item = yeasts[i];
var object = {name: item.name};
final_yeasts.push(object);
}
return final_yeasts;
}
self.prepareJSON = function(){
object = {
fermentables: self.dual_filter(self.fermentables(), ['pounds', 'ounces']),
hops: self.dual_filter(self.hops(), ['amount']),
yeasts: self.name_filter(self.purify_yeasts(self.yeasts())),
recipe_name: self.recipe_name(),
brew_method: self.brew_method(),
batch_size: self.batch_size(),
beer_style: self.beer_style(),
boil_time: self.boil_time(),
}
return object;
}
self.saveRecipeData = function(){
var recipe_data = ko.toJSON(self.prepareJSON());
alert("This is the data you're sending (universal Javascript object notation):\n\n" + recipe_data)
$.ajax({
url: "http://localhost:8000/receive-recipe",
headers: {
"Content-Type": "application/json"
},
method: "POST",
dataType: "json",
data: recipe_data,
success: function(data){
console.log("Success! Saved the recipe");
}
});
}
self.my_to_json = function(object){
return JSON.stringify(object, null, 4);
}
}
ko.applyBindings(new TaskListViewModel());
</script>
The server gives
@api_view(['GET'])
def serve_yeasts(request):
"""
Serve up some yeasts
"""
data = [
{'category': 'Danstar', 'yeasts': ['Danstar 1', 'Danstar 2']},
{'category': 'Fermentis', 'yeasts': ['West Coast', 'American Saison', 'White Wine']},
{'category': 'White Labs', 'yeasts': ['White 1', 'White Saison']},
]
return Response(data=data, status=status.HTTP_200_OK)
