How to add to nested children of knockout observable array

How to add to nested children of knockout observable array

I have some code where to add to a knockout observable array I am
converting the observable array into an object, unshifting a new object
and then mapping this object back to view model. This works but it seems
very slow. It takes around 2-5 seconds or more.
function addContact(office) { // Passing in object array of agency. We no
it contains correct office and agency ID
// Assign observable data to new variable then remove old
// variable from mapping
var objAgency = ko.toJS(agency);
vm.agency.removeAll();
// Fill new object with empty strings and related data
var objContact = {
agencyID: office.agencyID._latestValue,
emailAddress: "",
firstName: "",
jobName: "",
office: "",
OfficeID: office.officeID._latestValue,
personID: "",
surName: "",
title: ""
}
// unshift where office ID match
for (i in objAgency[0].offices) {
if (!isNaN(i)) {
if (objAgency[0].offices[i].officeID ===
objContact.OfficeID) {
objAgency[0].offices[i].contacts.unshift(objContact);
// At i remove one object
}
else {
}
}
}
vm.agency([ko.mapping.fromJS(objAgency[0])]);
}
I have tried adding to my observable instead of doing the conversion
process and I got this error:
Unhandled exception at line 9423, column 13 in
http://localhost:13762/scripts/breeze.debug.js
0x800a01b6 - JavaScript runtime error: Object doesn't support property or
method 'getProperty'
This is the code that causes the error
for (i in agency._latestValue[0].offices._latestValue) {
if (!isNaN(i)) {
if
(agency._latestValue[0].offices._latestValue[i].officeID =
objContact.OfficeID) {
agency._latestValue[0].offices._latestValue[i].contacts._latestValue.unshift([ko.mapping.fromJS(objContact)]);
}
}
}
See my screenshot for what agency looks like:

What is the correct way to add to this observable array? As I understand
latest value is a mechanism for tracking change so I shouldn't tamper with
that?