Why does not the data-binding work? (using nested foreach loops)

Question

The problem is that the data-binding doesn't work.

I have an observableArray() containing claims. Each claim has an observableArray() of expenses, which is one item from the self.pc_listOfExpenses().

Here's the structure of both arrays:

self.pc_listOfClaims = ([
   ID: 34
   claimAgainst: "CompanyName"
   date: "2010-10-10"
   desc: "Description"
   **expenses: Object[0]** // <= This one should be an array.
]);

self.pc_listOfExpenses = ko.observableArray([
   ID: "34"
   **Array** // <= This is the array of "Expense" Objects 
]);

Note: *Do not bother about the correct syntax above. I fill in the arrays from the services, using JSON. The Object[0] is what I see in the console. *

The idea is to map each claim, with the corresponding array of expenses: If we have claimID = 34, then in the self.pc_listOfExpenses() array we have 34=>Array().

Here's the Knockout code:

//#region Preview Claims Block
/**************************************************/
/*              Preview Claims Block              */
/**************************************************/

self.pc_listOfClaims = ko.observableArray([]);
self.pc_showDetailsArr = ko.observableArray([]);
self.pc_listOfExpenses = ko.observableArray([]);

// Get userID-specified Claims using WS
pc_GetSpecifiedClaims(self);

for (var i = 0; i < self.pc_listOfClaims().length; i++) {
    self.pc_showDetailsArr()[self.pc_listOfClaims()[i].ID] = ko.observable(false);
}

self.pc_showMoreDetails = function (claim) {

   if (typeof claim !== "undefined") {
       self.pc_showDetailsArr()[claim.ID](!self.pc_showDetailsArr()[claim.ID]());

       pc_GetClaimExpenses(claim.ID);

       for (var i = 0; i < self.pc_listOfExpenses()[claim.ID].length; i++) {
           self.pc_listOfClaims()[claim_id]["expenses"]().push(self.pc_listOfExpenses()[claim.ID][i]);
       }
   }
}
//#endregion

Here is the Web Service:

function pc_GetClaimExpenses(claimID) {

    $.ajax({
        cache: false,
        async: false,
        type: 'GET',
        url: '/DesktopModules/UltimateExpenses/API/Claims/GetSpecifiedExpensesAsJSONString',
        success: function (data) {
            self.pc_listOfExpenses()[claimID] = JSON.parse(data);
            //console.log(JSON.parse(data));
        }
    });
}

Here's the view:

<table id="claimsDataTable">
    <tbody data-bind="foreach: pc_listOfClaims">
        <tr>
            <td data-bind="text: claimAgainst"></td>
            <td data-bind="text: projectName"></td>
            <td data-bind="text: taskName"></td>
            <td data-bind="text: price"></td>
            <td data-bind="text: status"></td>
            <td data-bind="text: date"></td>
            <td class="actionOptions">
                <a href="#" data-bind="click: pc_showMoreDetails">M</a>
            </td>
        </tr>
        <tr>
            <td colspan="7" data-bind="visible:  pc_showDetailsArr()[$data.ID]">

                <!-- This is the part which does not work-->

                <div data-bind="foreach: expenses"> 
                    <span data-bind="text: ID"></span>
                    <span data-bind="text: Type"></span>
                    <span data-bind="text: Price"></span>
                </div>

            </td>
        </tr>
    </tbody>
</table>

Answer 1

To solve the problem, I created a Claim class, with an observableArray() for the expenses. Then using a loop I created each Claim and pushed every expense into the expenses observableArray(). Here's the code I hade to add/change. I hope it helps someone else too.

The Claim class:

function Claim(ID, claimAgainst, userID, projectName, taskName, desc, price, status, date) {
   this.ID = ID;
   this.claimAgainst = claimAgainst;
   this.userID = userID;
   this.projectName = projectName;
   this.taskName = taskName;
   this.desc = desc;
   this.price = ko.observable(price);
   this.status = ko.observable(status);
   this.date = date;
   this.expenses = ko.observableArray([]);
}//Claim

The Web service to get the claims and create the objects:

function pc_GetSpecifiedClaims(self) {

    $.ajax({
        cache: false,
        async: false,
        type: 'GET',
        url: '/DesktopModules/UltimateExpenses/API/Claims/GetSpecifiedClaimsAsJSONString',
        success: function (data) {

            tempArr = JSON.parse(data);

            for (var i = 0; i < tempArr.length; i++) {

                self.pc_listOfClaims.push(new Claim(tempArr[i].ID, tempArr[i].claimAgainst, tempArr[i].userID,
                    tempArr[i].projectName, tempArr[i].taskName, tempArr[i].desc, tempArr[i].price,
                    tempArr[i].status, tempArr[i].date));
            }
        }
    });
}

And finally I pushed the array from the self.pc_listOfExpenses(), using the corresponding claimID, into the self.pc_listOfClaims().expenses():

for (var i = 0; i < self.pc_listOfExpenses()[claim.ID].length; i++) {
   self.pc_listOfClaims()[claim_id].expenses.push(self.pc_listOfExpenses()[claim.ID][i]);
}

Answer 2

This can't work :

self.pc_listOfExpenses()[claimID] = JSON.parse(data);

Because you are modifying the internal array of the observableArray().

I am not sure, but you could try this :

var items = self.pc_listOfExpenses();
items[claimID] = JSON.parse(data);
self.pc_listOfExpenses(items);

I hope it helps.