Uncaught Error: Unable to process binding "foreach" (knockout js)

Question

Error :

"Uncaught Error: Unable to process binding "foreach: function() {return phones }" Message: Invalid object that looks like an observable; possibly from another Knockout instance"

html :

<h3>Contacts</h3>
<div >
    <table >
        <thead>
            <tr>
                <th>first name</th>
                <th>last name</th>
                <th>number</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: contacts">
            <tr>
                <td>
                    <input data-bind="value :firstName" /><br />
                    <a href="#" data-bind="value : $root.deleteContact">delete contact</a>
                </td>
                <td>
                    <input data-bind="value : lastName" />
                </td>
                <td>
                    <table>
                        <tbody data-bind="foreach : phones">
                            <tr>
                                <td><select data-bind="options : contactType , value : contactTypeValue"></select></td>
                                <td><input data-bind="value : number" /></td>
                                <td><a href="#" data-bind="click : $root.deleteNumber">delete number</a></td>
                            </tr>
                        </tbody>
                    </table>
                    <a href="#" data-bind="click :$root.addNumber">add number</a>
                </td>
            </tr>
        </tbody>
    </table>
    <br /><br />
    <button data-bind="click : addContact"> add contact</button>
</div>

javascript :

var contactsModel = function ()
    {
     var self = this;
     this.contacts = ko.observableArray([]);
     this.addContact = function ()
     {
         this.contacts.push({
             firstName: "",
             lastName: "",
             phones: ko.observableArray()
         });
     };
     this.deleteContact = function (contact)
     {
         this.contacts.remove(contact);
     };
     this.addNumber = function (contact)
     {
         contact.phones.push({
             type: "",
             number: ""
         });
     };
     this.deleteNumber= function (phone)
     {
         $.each(this.contacts(), function () { this.phones.remove(phone) })
     };
    }
ko.applyBindings(new contactsModel());

I am new to Knockout JS so can someone please give solution to above error.

@Nerdroid I have change value binding to click binding on the element but it did not solve error. — Shivam Poojara, Jan 17 '20 at 04:13
I forgot to mention that this error is generated when i click on **addContact** on first line**self.contacts.push**. And if I click second time it gives error **You cannot apply bindings multiple times to the same element** And if i click third time it gives error **Cannot read property 'length' of undefined**. — Shivam Poojara, Jan 17 '20 at 04:24
check answers here https://stackoverflow.com/questions/17710788/knockoutjs-v2-3-0-error-you-cannot-apply-bindings-multiple-times-to-the-same-e — Nerdroid, Jan 18 '20 at 11:53

score 0 · Answer 1 · answered Jan 16 '20 at 15:29

I will note 2 things. First of all, you declare the observableArray without an empty array in it, this might look like a simple case, yet knockout has an issue regarding array declarations, at least it had, up to some version. So change to this:

this.contacts.push({
             firstName: "",
             lastName: "",
             phones: ko.observableArray([]) // here
         });

Also there is a reason that you define self=this;, yet you never really use it. Re-write your code like so:

var contactsModel = function ()
    {
     var self = this;
     self.contacts = ko.observableArray([]);
     self.addContact = function ()
     {
         self.contacts.push({
             firstName: "",
             lastName: "",
             phones: ko.observableArray([])
         });
     };
     self.deleteContact = function (contact)
     {
         this.contacts.remove(contact);
     };
     self.addNumber = function (contact)
     {
         contact.phones.push({
             type: "",
             number: ""
         });
     };
     self.deleteNumber= function (phone)
     {
         $.each(self.contacts(), function () { self.phones.remove(phone) })
     };
    }

I have changed my code to above but it did not solve error. And I forgot to mention that this error is generated when i click on **addContact** on first line**self.contacts.push**. And if I click second time it gives error **You cannot apply bindings multiple times to the same element** And if i click third time it gives error **Cannot read property 'length' of undefined**. — Shivam Poojara, Jan 17 '20 at 04:20

Uncaught Error: Unable to process binding "foreach" (knockout js)

1 Answers1