I have been working with the knockout.js framework and adapted a basic contacts form example to suit my needs. I am able to successfully store values in my database, but I am encountering difficulties when trying to load values from the server. Despite having two contacts saved, the loaded values appear as empty fields. I have checked the ajax request in the console log and confirmed that values are being returned. How can I properly load the values from the server? DEMO
var ContactsModel = function (contacts) {
var self = this;
// Define observable array to hold contact data
self.contacts = ko.observableArray(ko.utils.arrayMap(contacts, function (contact) {
return {
firstName: contact.firstName,
lastName: contact.lastName,
phone: contact.phone,
alt_phone: contact.alt_phone,
main1: ko.observable(contact.main1),
main2: ko.observable(contact.main2)
};
}));
// Functions to add and remove contacts
self.addContact = function () {
self.contacts.push({
firstName: "",
lastName: "",
phone: "",
alt_phone: "",
main1: false,
main2: false
});
};
self.removeContact = function (contact) {
self.contacts.remove(contact);
};
// Additional functions for managing phone numbers
// Save function to convert data to JSON format
self.save = function () {
self.lastSavedJson(JSON.stringify(ko.toJS(self.contacts), null, 2));
};
self.lastSavedJson = ko.observable("");
};
// Fetching initial data from server using AJAX call
$.getJSON("functions/getPerson.php", function(allData) {
var initialData = $.map(allData, function(person) { return new ContactsModel(person) });
ko.applyBindings(new ContactsModel(initialData));
});