Sub-array within an observable array

Question

I am trying to create a new account which contains an inner array but I get an error:

Uncaught Error: The argument passed when initializing an observable array must be an array, or null, or undefined.

Any ideas why this is not working?

<script>
    function Account(id, name, balance, deposits) {
        this.Id = id;
        this.Name = name;
        this.Balance = balance;
        this.Deposits = deposits;
    }
    var myAccountViewModel = function ()
    {
        this.Accounts = ko.observableArray([
              new Account(1, "A1", 100, [1,2]),
              new Account(2, "A2", 200, [2]),
              new Account(3, "A3", 300, [2, 3]),
              new Account(4, "A4", 400, [2,3]),
        ])
    }
    ko.applyBindings(myAccountViewModel);
</script>

HTML

<table>
    <thead>
        <tr>
            <th>S.No</th>
            <th>ID</th>
            <th>Name</th>
            <th>Balance</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: {data:Accounts, as:'Account'}">
        <tr>
            <td data-bind="text:($index()+1)"></td>
            <td data-bind="text:Account.Id"></td>
            <td data-bind="text:Account.Name"></td>
            <td data-bind="text:Account.Balance"></td>
            <!--<td>
                <ul data-bind="foreach: {data:Deposits, as:'Amount'}">
                    <li data-bind="text:(Account().Name + 'Deposited ' + Amount())"></li>
                </ul>
            </td>-->
        </tr>
    </tbody>
</table>

I can't recreate your error. Tried your code but instantiated a myAccountViewModel then applied bindings to that. Did not get the error you describe. Can you include the associated html? — KolaB
– KolaB, Commented Feb 20, 2018 at 11:54
Is it the lack of new in ko.applyBindings(myAccountViewModel); ? — user3297291
– user3297291, Commented Feb 20, 2018 at 12:03
@KolaB I have added the HTML. Please note that I get the error even though the html is commented out. — alwaysVBNET
– alwaysVBNET, Commented Feb 20, 2018 at 12:08
@alwaysVBNET - Your code works for me! I used KO 3.4.2 and I placed your script section towards after the table section ... no errors in console (Chromium 64.0.3282.140 Built on Ubuntu , running on Ubuntu 16.04) — KolaB
– KolaB, Commented Feb 20, 2018 at 12:13
When running your code in 'strict' mode I got an error about initialising a property of undefined. I made some minor changes to your code to get this version working (setting this to self in two places and using the new keyword when applying binding). I can post that as a possible answer if you're still stuck. — KolaB
– KolaB, Commented Feb 20, 2018 at 12:43

KolaB · Accepted Answer · 2018-02-21 13:21:31Z

1

The code in the question worked for me. Below is a version that works for @alwaysVBNET. - It's basically the content of the code in the question with some minor modifications. I downloaded KO 3.4.2 from http://knockoutjs.com/downloads/knockout-3.4.2.js

The main change is the use of the temp variable to instantiate Account objects before adding them to the observable array. I will be interested if someone can explain why this should make a difference.

<!doctype html>
<html>
<head>
<title>KO js test</title>
<script src=./knockout-3.4.2.js></script>

</head>
<body>
<table>
    <thead>
        <tr>
            <th>S.No</th>
            <th>ID</th>
            <th>Name</th>
            <th>Balance</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: {data:Accounts, as:'Account'}">
        <tr>
            <td data-bind="text:($index()+1)"></td>
            <td data-bind="text:Account.Id"></td>
            <td data-bind="text:Account.Name"></td>
            <td data-bind="text:Account.Balance"></td>
            <td>
                <ul data-bind="foreach: {data:Deposits, as:'Amount'}">
                    <li data-bind="text:(Account.Name + 'Deposited ' + Amount)"></li>
                </ul>
            </td>
        </tr>
    </tbody>
</table>
<script>
    "use strict";
    function Account(id, name, balance, deposits) {
        var self = this;
        self.Id = id;
        self.Name = name;
        self.Balance = balance;
        self.Deposits = deposits;
    }
    var MyAccountViewModel = function ()
    {
        var self = this;
        self.Accounts = ko.observableArray();
        var temp = new Account(1, "A1", 100, [1,2]);
        self.Accounts.push(temp);
        temp = new Account(2, "A2", 200, [2]);
        self.Accounts.push(temp);
        temp = new Account(3, "A3", 300, [2, 3]);
        self.Accounts.push(temp);
        temp = new Account(4, "A4", 400, [2,3]);
        self.Accounts.push(temp);
    }
    ko.applyBindings(new MyAccountViewModel());
</script>
</body>
</html>

edited Feb 21, 2018 at 13:21

answered Feb 20, 2018 at 15:49

KolaB

4913 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

alwaysVBNET Over a year ago

I have copied/pasted your code and I'm still getting the same error! Unreal. I'm using the same version of Knockout.

KolaB Over a year ago

What versions are your os and browser?

KolaB Over a year ago

Have you tried creating an empty array and pushing the items to it i.e. var self.Accounts = ko.observableArray(); var temp = new Account(1, "A1", 100, [1,2]); self.Accounts.push(temp);

alwaysVBNET Over a year ago

no error with the above way. So maybe this could be the answer? Can you edit your answer and also uncommend the <td> which the Deposits are supposed to be shown?

Collectives™ on Stack Overflow

Sub-array within an observable array

Uncaught Error: The argument passed when initializing an observable array must be an array, or null, or undefined.

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Uncaught Error: The argument passed when initializing an observable array must be an array, or null, or undefined.

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related