KnockoutJS：在订阅回调中修改可观察数组时进行无限递归

Question

I can't figure out why the following code snippet leads to infinite recursion:

var observableArray = ko.observableArray();
observableArray.subscribe(function (changes) {
    changes.forEach(function(change) {
        console.log("change: " + JSON.stringify(change));
        if (change.status === 'added') {
            if (change.value === "first") {
                observableArray.push("second");
            }
        }
    });
}, null, "arrayChange");

observableArray.push("first");

And here is the console log:

change: {"status":"added","value":"first","index":0}    
change: {"status":"added","value":"first","index":0}  
change: {"status":"added","value":"first","index":0}  
change: {"status":"added","value":"first","index":0}  
change: {"status":"added","value":"first","index":0}  
...  
Uncaught RangeError: Maximum call stack size exceeded  

I really don't get what is going on here. Could anyone help me, please?

Answer 1

This looks like logical mistake

var observableArray = ko.observableArray();
 console.log(changes);  //Add log here
observableArray.subscribe(function (changes) {
    changes.forEach(function(change) {
        console.log("change: " + JSON.stringify(change));
        if (change.status === 'added') {
            if (change.value === "first") {
                observableArray.push("second");
            }
        }
    });
}, null, "arrayChange");

observableArray.push("first"); 

As per your logic of subscribe you do not want to add "first" value if it is already there. But that "first" value is always going to be there in your observable array. Add console log as I have added in above code.

Now this is what you will see output like

You have added observableArray.push("second"); but, in that same observable array "first" is always there and code will keep adding "second" and your code will result into call stack size exceeded.

I think you need to change the logic to add if "first" element is there in the array then do not insert it like break operation or something like that.