Get order from KnockoutJS viewmodel based on Id - asp.net-mvc

Question

I'm trying to get an order from a KnockoutJS viewmodel, but having a hard time getting this done.
This is what the viewmodel looks like:
{"Orders":
[{"Id":16,"Status":2,
"Products":
[{"Id":14,"OrderId":16,"Price":5},
{"Id":15,"OrderId":16,"Price":10},
{"Id":16,"OrderId":16,"Price":20},
{"Id":17,"OrderId":16,"Price":30}]},
{"Id":17,"Status":2,
"Products":
[{"Id":18,"OrderId":17,"Price":0}]}
]}
This is one of my many tries:
var viewModel = ko.mapping.fromJS(#Html.Raw(Json.Encode(Model)));
ko.applyBindings(viewModel);
$(document).on("click", ".btnDetails", function () {
var oId = $(this).attr('id');
debugger;
var order = ko.utils.arrayFirst(viewModel.Orders(), function (item) {
return item.Id === oId;
});
});
How can I get the complete order with Id 16?
This is not an observableArray(), there are no mutations done. This will only serve as showing the details of an order in a Modal (Twitter Bootstrap).

Answer 1

It looks like your code should work just fine, except that your arrayFirst() function has an error. You should have
var order = ko.utils.arrayFirst(viewModel.Orders(), function(item) {
return item.Id() === oId;
});
Because you mapped your viewmodel properties, comparing the Id of item will still be comparing the ko function. You need to get the value and compare that directly. Once you've done that, order should be the first order that matches the id.

Answer 2

I'm not entirely clear on what you mean by the complete order. but have a look at this jsfiddle
EDIT
re-reading the question again its starting to make sense to me.
To get a reference to the order
add a selectedOrder observable to your viewmodel.
then add a function showOrder that takes in an the order. and set the selectedOrder to the incomming item
on the tag that contains the order data-bind to the click.
and that should get you pretty close to what I believe you need as the selectedOrder will contain all the products as well for display purposes
HMTL
<ul class="list-group" data-bind="foreach: data.Orders">
<li class="list-group-item">
<h3 data-bind="click: $parent.showItem">
Order <span data-bind="text: Id"></span>
</h3>
</li>
</ul>
JS
var model = {
"Orders": [{
"Id": 16,
"Status": 2,
"Products": [{
"Id": 14,
"OrderId": 16,
"Price": 5
}, {
"Id": 15,
"OrderId": 16,
"Price": 10
}, {
"Id": 16,
"OrderId": 16,
"Price": 20
}, {
"Id": 17,
"OrderId": 16,
"Price": 30
}]
},
{
"Id": 17,
"Status": 2,
"Products": [{
"Id": 18,
"OrderId": 17,
"Price": 0
}]
}]
};
var selectedOrder = ko.observable();
function showItem(item) {
selectedOrder(item);
alert("Selected Order: " + item.Id());
}
var vm = {
data: model,
showItem: showItem,
selectedOrder: selectedOrder
};
$(document).ready(function () {
var viewModel = ko.mapping.fromJS(vm);
ko.applyBindings(viewModel);
});