Observable values disappearing after being pushed into observableArray - ajax

Question

I'm grabbing data from the server and pushing them into an observable array.
I'm pushing observables into an observable array.
As I push the data into the observables, the observables contain the data.
However as soon as I push the observables into the observable Array, a few of the observables are missing data.
self.mealFoods([]);
$.ajax({
url: "/mealsurl/1",
async: false,
dataType: 'json',
success: function(datad) {
for(var lia = 0; lia < datad.length; lia++){
var cats_url = "/catsurl/" + datad[lia].category_id;
var units_by_food_url = "/unitsurl/" + datad[lia].ndb_no;
var foodThing = new NewFood();
foodThing.foodId(parseInt(datad[lia].id)); //works
foodThing.category(parseInt(datad[lia].category_id)); //works
$.ajax({
url: cats_url,
dataType: 'json',
success: function(dat) {
foodThing.category_foods(dat); //works
}
});
foodThing.food(datad[lia].ndb_no); //works
$.ajax({
url: units_by_food_url,
dataType: 'json',
success: function(dat) {
foodThing.food.units(dat); //works
}
});
foodThing.unit(parseInt(datad[lia].seq)); //works
foodThing.number_of_unit(datad[lia].this_much); //works
self.mealFoods.push(foodThing);
// At this point when looking inside the mealFoods array: self.mealFoods()[0].food(), self.mealFoods()[0].unit(), self.mealFoods()[0].food.units(), self.mealFoods()[0].category_Foods() ALL ARE EMPTY
}
}
});

Answer 1

You, sir, are having a classic case of async-brain-melt. It is a common sympton in beginners but never fear for the recovery rate is nearly 100%. :)
I would wager your experience is with synchronous languages, that is, where if one line is written after the other, the lines written before are executed before, always.
A normal JavaScript function is synchronous. For example:
console.log(1);
console.log(2);
As expected, this prints 1 and then 2.
However, asynchronous code is not necessarily executed in the order it was declared. Consider this example using a setTimeout function, which schedules a function for later execution:
setTimeout(function(){ console.log(1); }, 1000);
console.log(2);
Now, the output will be 2 and 1, because 1 only ran 1000 millis after the setTimeout call.
So, I imagine you are beginning to understand how this applies to your problem.
Your calls to cats_url and units_by_food_url are asynchronous. Therefore, the following code does not wait for them to finish. So, when you access self.mealFoods()[0].food.units(), the success function has not yet grabbed the data!
What you need to do is to coordinate your asynchronous calls appropriately. There are many ways to achieve that. First, I'll teach you the most simple strategy, using only functions:
Grab the list from the server
When you have the list, iterate over each meal and start two ajax calls (up to here, you are already doing everything right)
Now comes the magic: when you have the results for either ajax call, you call an "itemComplete" function. This function will sync the two calls - it will only proceed if the two calls finished.
Finally, call a "listComplete" function each time any item is complete. This function must also check if all items are complete before proceeding.
So, it would look something like this:
$.ajax({
url: "/meals/1",
dataType: 'json',
success: function(list) {
var observableArray = ko.observableArray([]); // this will hold your list
var length = list.length;
var tries = 0;
var listComplete = function () {
tries++;
if (tries == length) {
// Hooray!
// All your items are complete.
console.log(observableArray());
}
};
list.forEach(function(item){
var propertyOneUrl = item.propertyOneUrl;
var propertyTwoUrl = item.propertyTwoUrl;
var propertyOneComplete = false;
var propertyTwoComplete = false;
var food = new Food(item.id);
var itemComplete = function () {
if (propertyOneComplete && propertyTwoComplete) {
// This item is complete.
observableArray.push(food);
// Let's warn list complete so it can count us in.
listComplete();
}
};
// Start your ajax calls
$.ajax({
url: propertyOneUrl,
dataType: 'json',
success: function (propertyOne) {
food.propertyOne(propertyOne);
// Declare that your first property is ready
propertyOneComplete = true;
// We can't know which property finishes first, so we must call this in both
itemComplete();
}
});
$.ajax({
url: propertyTwoUrl,
dataType: 'json',
success: function (propertyTwo) {
food.propertyTwo(propertyTwo);
// Declare that your second property is ready
propertyTwoComplete = true;
// We can't know which property finishes first, so we must call this in both
itemComplete();
}
});
}); //for each
} // success
});
Now, you probably realize how tiresome that pattern can be. That's why there are other ways to better solve this problem. One of these is a pattern called "Promises". You can learn more about them in these links:
https://www.promisejs.org/
http://blog.gadr.me/promises-are-not-optional/
And you'll be happy to know that jQuery.ajax() returns a Promise! So, now you can try and solve that problem using Promises. You'll end up with a much cleaner code.
Hope you make it!

Answer 2

It's because you are doing async ajax calls in a loop. Because whenever an ajax call is made it the loop continues it means that by the time the response comes back the object assigned to foodThing is now no longer what it was set to before the ajax call. Because a for loop is so quick is most likely that only the last object created in the loop is updated.
If you have a look at this simple loop it has the same problem:
for (var i = 0; i < 10; i++){
var a = new NewFood(i);
$.ajax({
url: "/catsurl/1",
dataType: 'json',
success: function(dat) {
console.debug(a.id);
}
});
}
By the time the ajax call comes back a has changed and what ends up happening is only 9 gets written out 10 times: http://jsfiddle.net/r6rwbtb9/
To fix this we would use a closure which is essentially wrapping the ajax call in a function in which we self contain the item we want to do something with:
for (var i = 0; i < 10; i++){
var a = new NewFood(i);
(function (a) {
$.ajax({
url: "/catsurl/1",
dataType: 'json',
success: function(dat) {
console.debug(a.id);
}
});
})(a);
}
And then you can see that the numbers 0-9 are output to the console: http://jsfiddle.net/r6rwbtb9/1/. It's also interesting to note that you can't ensure that each request will necessarily come back in the the same order. That is why sometimes the numbers could come back in a different order to 0-9 because some requests are quicker than others.
SO back to your code. In order to make sure you are updating the correct item for each callback you need to use a closure for each ajax call. There was also a problem with foodThing.food.units(dat) which needed to be foodThing.food().units(dat) as foodThing.food() is an observable.
So to wrap in closures we need to change the two ajax calls to this:
(function(category_foods){
$.ajax({
url: cats_url,
dataType: 'json',
success: function(dat) {
category_foods(dat);
}
});
})(foodThing.category_foods);
(function(units){
$.ajax({
url: units_by_food_url,
dataType: 'json',
success: function(dat) {
units(dat);
}
});
})(foodThing.food().units);