Hi Experts,
I want to change a list item inside an observableArray.
When done in a static list, it worked fine. Changes are reflected on UI
// scenario 1 works fine
self.students = ko.observableArray();
var student1 = {firstName: "Wesley", link: "www.google.com"}
var student2 = {firstName: "John", link: "www.oracle.com"}
self.students.push(student1);
self.students.push(student2);
student1.firstName = "David"; // I want to change the first student name from Wesley to David
However when I did that in a restful API call, UI still holds the hold data, even though ko.$data shows the updated value.
I also tried refreshing the component and put this webservice call in handleActivated method. Still no luck.
// scenario 2 not working, Wesley doesn't change to David on UI, although it's changed in ko.$data
self.students = ko.observableArray();
self.handleActivated = function() {
$.getJSON("showJSONData", function (students) {
students.forEach(function (student) {
self.students.push(student);
if (student.firstName === "Wesley") {
student.firstName = "David";
}
});//end of forEach
$('#myMenu').ojMenu("refresh");
}); //end of getJSON method
};
Any idea why it's so and how to fix it?
Please check the attached for the complete code and the issue screenshot
Thanks,
JET learner