I am facing an issue where, despite the absence of errors, I am struggling to display values in my drop-down list.
Here is my knockout view model:
function UserRecruitingViewModel(apiBaseUrl, userId) {
var self = this;
self.orgs = ko.observableArray();
//ddl org view switcher stuff
self.orgDdl = ko.observableArray();
self.selectedOrg = ko.observable();
var DropdownOrg = function (name, guid) {
this.orgName = name;
this.orgId = guid;
};
//fetch initial data
$.getJSON(apiBaseUrl + "?userId=" + userId, function (data) {
//alert(data);
$.each(data, function () {
//alert(data);
var dropdownOrg = new DropdownOrg();
var org = new Organization();
$.each(this, function (k, v) {
//alert("in foreach");
if (k == "UserGuid") {
org.userGuid = v;
}
if (k == "OrgGuid") {
dropdownOrg.orgId = v;
org.orgGuid = v;
}
if (k == "OrgName") {
dropdownOrg.name = v;
org.orgName = v;
}
if (k == "IsHiring") {
org.isHiring = v;
}
if (k == "Blurb") {
org.blurb = v;
}
//alert("k var: "+k); //field name
//alert("v var "+v); //field value
//alert("data var " + data); //array of objects (3)
//alert(org);
});
alert("ddl " + dropdownOrg.name);
self.orgDdl.push(dropdownOrg);
self.orgs.push(org);
});
});
}
When executing alert("ddl " + dropdownOrg.name), the correct values are displayed.
On my web page, I have the following:
<ul class="list-unstyled" data-bind="foreach: orgs">
<div class="row">
<div class="col-md-6">
<p>
Viewing:
<select class="form-control"
data-bind="options: $parent.orgDdl(), optionsText: orgName, value: orgGuid, optionsCaption: 'Change...'"></select>
</p>
...snip...
Upon inspecting the elements on the browser, I notice that although the alerts show the correct data, the drop-down list displays 4 options: "Change..." and 3 empty options. The actual values seem to be missing from the list.
Could you help pinpoint where I might be making a mistake in my syntax?