Knockout select values from controller - asp.net-mvc-4

Question

I get respons from controller
[HttpGet]
public JsonResult GetItems(string date)
{
IList<dough> modelList = new List<dough>();
modelList.Add(new dough { Type = "framed" });
modelList.Add(new dough { Type = "unframed" });
modelList.Add(new dough { Type = "soft" });
return Json(modelList, JsonRequestBehavior.AllowGet);
}
and display it in such way
<table>
<thead>
<tr><th>Waste</th></tr>
</thead>
<tbody data-bind="foreach: items">
<tr>
<td><select data-bind="options: $root.availableWastes, value: Waste, optionsText: 'Type'"></select></td>
</tr>
</tbody>
</table>
result
The main question is how to display items with default values that was getted from controller? What need to fix?
Controller:
public class HomeController : Controller
{
//
// GET: /Home/
public ActionResult Index()
{
return View();
}
[HttpGet]
public JsonResult GetItems(string date)
{
IList<dough> modelList = new List<dough>();
modelList.Add(new dough { Type = "framed" });
modelList.Add(new dough { Type = "unframed" });
modelList.Add(new dough { Type = "soft" });
return Json(modelList, JsonRequestBehavior.AllowGet);
}
}
class dough
{
public string Type { get; set; }
}
Index.cshtml
#{
ViewBag.Title = "Index";
}
<script src="~/Scripts/knockout-2.2.0.js"></script>
<button data-bind="click: loadItems">Load</button>
<table>
<thead>
<tr><th>Waste</th></tr>
</thead>
<tbody data-bind="foreach: items">
<tr>
<td><select data-bind="options: $root.availableWastes, value: Waste, optionsText: 'Type'"></select></td>
</tr>
</tbody>
</table>
<script>
function MyViewModel() {
var self = this;
self.availableWastes = [{ Type: "framed", score: 0 },
{ Type: "soft", score: 1 },
{ Type: "unframed", score: 2 }];
self.items = ko.observableArray();
var date = new Date();
self.loadItems = function () {
var date = new Date();
debugger;
$.ajax({
cache: false,
type: "GET",
url: "Home/GetItems",
data: { "date": date },
success: function (data) {
var result = "";
self.items.removeAll();
$.each(data, function (id, item) {
self.items.push({ Waste: item.Type });
});
},
error: function (response) {
alert('eror');
}
});
}
}
ko.applyBindings(new MyViewModel());
</script>

Answer 1

Looks like you want to pre-select values.
Update self.items with the Type name and Waste into an observable:
self.items.push({ Waste: ko.observable(item.Type), Type: item.Type });
Then use that in the optionsValue binding:
<select data-bind="options: $root.availableWastes, value: Waste, optionsText: 'Type', optionsValue: 'Type'">
Screenshot: