As Opportunity also have that field city(cgi_city),postalcode(cgi_postalcode),province('cgi_province' ),serviceArea('cgi_servicearea') with same schema name.
I don't Understand then you use that Xrm.WebApi.Update Function . NO need for that Just use setValue like
formContext.getAttribute("cgi_city").setValue(city); if city have datatype text.
For Other Field dataType Check this link:
https://crm365blog.wordpress.com/2018/05/29/get-set-field-values-in-c-javascript-and-utility-functions/
On Change or OnLoad in both case just use setValue() to set all field
function retrieveServiceAvailabilityInfo(executionContext)
{
var city;
var postalCode;
var province;
var serviceArea;
//var policeGuard;
formContext = executionContext.getFormContext();
var serviceAvailabilityEntity = formContext.getAttribute('cgi_serviceavailability');
var sAEID = 'F0A708D3-9700-EA11-A811-000D3AF3A041'; //serviceAvailabilityEntity.getValue()[0].id;
Xrm.WebApi.retrieveRecord('cgi_serviceavailability', sAEID,'?$select=cgi_city,cgi_postalcode,cgi_province,cgi_servicearea').then(
function success(result)
{
city = result.cgi_city;
postalCode = result.cgi_postalcode;
province = result.cgi_province;
serviceArea = result.cgi_servicearea;
//policeGuard = result.cgi_policeguard;
/*var data =
{
'cgi_city': city,
'cgi_postalcode': postalCode,
'cgi_province': province,
'cgi_servicearea': serviceArea
}*/
// if all four fields are text Field
formContext.getAttribute("cgi_city").setValue(city);
formContext.getAttribute("cgi_postalcode").setValue(postalCode);
formContext.getAttribute("cgi_province").setValue(province);
formContext.getAttribute("cgi_servicearea").setValue(serviceArea);
//Xrm.WebApi.updateRecord('opportunity',formContext.data.entity.getId(), data).then(successCallback, errorCallback);
if(formContext.ui.getFormType() == 2){ // save will be call on Update Form not in create
formContext.data.entity.save();
}
},
function (error)
{
alert('Error');
}
);
}
Hope it helps