Populate Multi-select list from Ajax in Knockout - ajax

Question

I have an editable table based off of the Knockoutjs example. I've been trying to populate a multi-select dropdown list from an AJAX call to ASP MVC controller. I've looked through this example, this one, and this one but am still having issues getting it to work.
Here's the html:
<tbody data-bind='foreach: users' class="table-striped">
<tr>
<td><input class='required number form-control' maxlength="9" stringlength="9" data-bind='value: id, uniqueName: true' /></td>
<td><input class='required form-control' data-bind='value: firstName' /></td>
<td><input class='required form-control' data-bind='value: lastName' /></td>
<td>
<select data-bind="options: MAMUserGroupsListOptions, selectedOptions: MAMSelectedGroup">
<!--dropdown list goes here-->
</select>
</td>
<td><a href='#' data-bind='click: $root.removeUser'>Delete</a></td>
</tr>
</tbody>
Here's the javascript for the knockout portion:
var UserModel = function (users) {
var self = this;
self.users = ko.observableArray(users);
//add user
self.addUser = function () {
self.users.push({
id: "",
firstName: "",
lastName: "",
MAMUserGroupsListOptions: "",
MAMUserGroups: ""
});
};
//remove user
self.removeUser = function (user) {
self.users.remove(user);
};
var viewModel = new UserModel([
{
id: ko.observable(""), firstName: ko.observable(""), lastName: ko.observable(""),
MAMUserGroupsListOptions: ko.observable(),//this is where I need to populate
MAMSelectedGroups: ko.observable(),//this is the result of the multiselect
}
]);
ko.applyBindings(viewModel);
Here's the controller:
[HttpGet]
public ActionResult MAMUserGroupsList()
{
var MAMUserGroupsListOptions = db.MAMUserGroupsListModels.Select(x => new {
MAMUserGroupName = x.MAMUserGroupName
}).ToList();
return Json(MAMUserGroupsListOptions, JsonRequestBehavior.AllowGet);
}
When the controller is called via AJAX, this is what returns:
{MAMUserGroupName: "MAMGroup1"}, {MAMUserGroupName: "MAMGroup2"}, etc...
I'm trying to get the multi-select dropdown to have "MAMGroup1", MAMGroup2, etc.
I've been banging my head against the wall on this- any help would be much appreciated.

Answer 1

Looks like you just want to map the array of objects to extract the one value of interest. If you start with your result in a variable named ajaxResult,
MAMUserGroupsListOptions(ajaxResult.map(obj => obj.MAMUserGroupName));
will assign the values to your observable array. Or if the value is available to you when you're creating your viewmodel,
MAMUserGroupsListOptions: ko.observable(ajaxResult.map(obj => obj.MAMUserGroupName))