Knockout data-bind making table results disappear

Question

I currently have a working example pulling data from a JSON response and populating a table however, when i add the checkbox to the results table all of the data that once populated the table is missing. for example when i search for the letter "T" in the first name field it populates the table with all results containing the letter T in the first name. however once i add the all data that once populated no longer appears. when i remove the data bind section it works fine and all data populates and a checkbox appears and can be checked and unchecked just fine. i believe the problem is because i have a foreach running it is searching for the data within the json response but because it cant find any it fails. so how do i go about excluding the checked databind from the foreach if that is the issue.

  <tbody data-bind="foreach: policies">
            <tr>
                <td><input type="checkbox" data-bind="checked: queued" /></td>
                <td data-bind="text: policy_number"></td>
                <td data-bind="text: policy_type"></td>
                <td data-bind="text: contact.first"></td>
                <td data-bind="text: contact.last"></td>
                <td data-bind="text: contact.street"></td>
                <td data-bind="text: contact.city"></td>
                <td data-bind="text: contact.state"></td>
                <td data-bind="text: contact.zipcode"></td>
                <td data-bind="text: contact.phonenumber"></td>
            </tr>
        </tbody>
    </table>
    <a data-bind="visible: queued" class="btn btn-lg btn-primary btn-block">Generate</a>
     <!--class="clickable" data-bind="click: generate"-->
    <script type="text/javascript">
    /* global ko, $ */
    function Policy(data) {
        var self = this;
        Object.keys(data).forEach(function(prop) {
            self[prop] = data[prop];
        });

        self.generate = function() {
            window.open("{{ url_for('genreport') }}/" + qvm.letter() + '/' + self.id);
        }

    }


    function QueryViewModel(){
        var self = this;

        self.first = ko.observable('');
        self.last = ko.observable('');
        self.phone = ko.observable('');

        self.letter = ko.observable();

        self.letters = {{ letters|safe }};

        self.policies = ko.observableArray();
        self.queued = ko.observable(false);

        self.clear = function() {
            self.policies.removeAll();
            self.first('');
            self.last('');
            self.phone('');
        }

        self.search = function() {
            // postJson here
            var queryObj = {
                first: self.first(),
                last: self.last(),
                phone: self.phone()
            }

            $.postJSON("{{ url_for('report_search') }}", queryObj, function(result) {
                // first empty our policy table
                self.policies([]);

                // add results
                result.policies.forEach(function(p) {
                    self.policies.push(new Policy(p));
                });
            });
        }    

    }

    var qvm = new QueryViewModel()

    ko.applyBindings(qvm);
    </script>

Your question is not quite clear. You empty the policies table yourself (self.policies([]);) - what's so surprising that it is empty? — Tomalak
that bit empties the table before we populate it as you can see afterwards with the following section. as i said the table works perfectly fine until i add the databind to the checkbox. if i remove the databind it works fine but when i add it back the table shows no results so the line that has <td><input type="checkbox" data-bind="checked: queued" /></td> causes the table to show no results only when it contains the data-bind="checked: queued" — Trevor
...and there are no errors in the browser console that you could fix? — Tomalak
the errors being reported are with the data-bind. its saying that it cant find any reference to it in the json. how would i go about making it so it didnt look for that within the json. The error i get is Uncaught ReferenceError: Unable to process binding "checked: function (){return queued }" Message: queued is not defined — Trevor
Your foreach: binding sets the context to the items in the policies array. So it expects the queued property on those items, but queued is a property on the QueryViewModel - "one level up", so to speak. Use $parent.queued to go to the parent context inside the body of foreach:. — Tomalak

Trevor Trevor · Accepted Answer · 2018-01-14T22:37:07

as stated by Tomalak, I had to point the check to the parent as it was looking for queued to be defined within the JSON response. adding $parent. in front of queued solved the issue.

Knockout data-bind making table results disappear

1 Answers