RaviKant Hudda
RaviKant Hudda

Reputation: 1042

Why access of object of ObservableArray is not working in child foreach?

Hello I am new to knockout and I am stuck with a situation where I am creating a table with nested foreach but inner loop works on condition matched with outer loop but it is working when above object is plain array like given.

viewModel.Subject=ko.observableArray(['Science','Math']);

below given observable is not working to bind child elements

viewModel.SubjectClass=ko.observableArray([{'Class':'8','Subject':'Science'},{'Class':'7','Subject':'Math'},{'Class':'8','Subject':'Science'},{'Class':'6','Subject':'Math'}]);

 var viewModel={};
            viewModel.Subject=ko.observableArray(['Science','Math']);
            viewModel.SubjectClass=ko.observableArray([{'Class':'8','Subject':'Science'},{'Class':'7','Subject':'Math'},{'Class':'8','Subject':'Science'},{'Class':'6','Subject':'Math'}]);
            viewModel.Students=ko.observableArray([
                {'StId':1,'StName':'John','Class':'8','Subject':'Science'},
                {'StId':2,'StName':'Martha','Class':'7','Subject':'Math'},
                {'StId':3,'StName':'George','Class':'6','Subject':'Math'},
                {'StId':4,'StName':'Martin','Class':'8','Subject':'Science'},
                {'StId':5,'StName':'Donny','Class':'7','Subject':'Math'},
                {'StId':6,'StName':'Kit','Class':'6','Subject':'Science'},
                {'StId':7,'StName':'Albert','Class':'8','Subject':'Math'}
            ]);
            ko.applyBindings(viewModel);
 body{
                background-color: white;
            }
            .subjectHeader{
                font-weight: bolder;
                font-size: 14px;

            }
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<table class='table table-condensed table-bordered'>
            <thead>
                <th>St Id</th>
                <th>St Name</th>
                <th>Class</th>
                <th>Subject</th>
            </thead>
            <!--<tbody data-bind='foreach: viewModel.SubjectClass'>-->
            <tbody data-bind='foreach: viewModel.Subject'>
                <tr><td colspan="4">
                    <p class="subjectHeader">
                        <!--<span data-bind="text:Class"></span>
                        <span data-bind='text:Subject' style="margin-left: 40%;"></span>-->
                        <span data-bind='text:$data' style="margin-left: 40%;"></span>
                    </p>
                    <table class='table table-condensed table-bordered'> 
                            <tbody data-bind="foreach:viewModel.Students">
                                <!--<tr data-bind="if: Subject == $parentContext.Subject">-->
                                <tr data-bind="if: Subject == $parentContext.$data">
                                    <td data-bind='text:StId'></td>
                                    <td data-bind='text:StName'></td>
                                    <td data-bind='text:Subject'></td>
                                    <td data-bind='text:Class'></td>
                                </tr>
                            </tbody>
                        </table>
                </td>
                </tr>                
            </tbody>
        </table>

I understand this issue is because of $parentContext as it is not having reference of observableArray that's why 'Subject' array is working but not SubjectClass for binding child loop. Part which is not working I have commented.

Upvotes: 1

Views: 57

Answers (1)

Brother Woodrow
Brother Woodrow

Reputation: 6372

You simply need to use $parent, which holds the actual data, instead of $parentContext, which is a reference to the binding context.

 var viewModel={};
            viewModel.Subject=ko.observableArray(['Science','Math']);
            viewModel.SubjectClass=ko.observableArray([{'Class':'8','Subject':'Science'},{'Class':'7','Subject':'Math'},{'Class':'8','Subject':'Science'},{'Class':'6','Subject':'Math'}]);
            viewModel.Students=ko.observableArray([
                {'StId':1,'StName':'John','Class':'8','Subject':'Science'},
                {'StId':2,'StName':'Martha','Class':'7','Subject':'Math'},
                {'StId':3,'StName':'George','Class':'6','Subject':'Math'},
                {'StId':4,'StName':'Martin','Class':'8','Subject':'Science'},
                {'StId':5,'StName':'Donny','Class':'7','Subject':'Math'},
                {'StId':6,'StName':'Kit','Class':'6','Subject':'Science'},
                {'StId':7,'StName':'Albert','Class':'8','Subject':'Math'}
            ]);
            ko.applyBindings(viewModel);
 body{
                background-color: white;
            }
            .subjectHeader{
                font-weight: bolder;
                font-size: 14px;

            }
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<table class='table table-condensed table-bordered'>
            <thead>
                <th>St Id</th>
                <th>St Name</th>
                <th>Class</th>
                <th>Subject</th>
            </thead>
            <tbody data-bind='foreach: viewModel.SubjectClass'>
            <!--<tbody data-bind='foreach: viewModel.Subject'>-->
                <tr><td colspan="4">
                    <p class="subjectHeader">
                        <span data-bind="text:Class"></span>
                        <span data-bind='text:Subject' style="margin-left: 40%;"></span>
                        <!--<span data-bind='text:$data' style="margin-left: 40%;"></span>-->
                    </p>
                    <table class='table table-condensed table-bordered'> 
                            <tbody data-bind="foreach:viewModel.Students">
                                <tr data-bind="if: Subject == $parent.Subject">
                                <!--<tr data-bind="if: Subject == $parentContext.$data">-->
                                    <td data-bind='text:StId'></td>
                                    <td data-bind='text:StName'></td>
                                    <td data-bind='text:Subject'></td>
                                    <td data-bind='text:Class'></td>
                                </tr>
                            </tbody>
                        </table>
                </td>
                </tr>                
            </tbody>
        </table>

Upvotes: 1

Related Questions