Magento 2.2: How can I load the content of a table with Knockout JS when the page is rendered

Question

I have created a custom page where customer accounts that belong to the same company are listed.

The table content is based on an observable array so that it updates automatically when an account is edited or added.

I am not able to populate the table directly when the page is rendered. For testing I placed a click binding on the table header. When I click on the header the table is populated. But I want that the function is called directly when the page is rendered. I have already tried serveral things, but I am not able to get it to work.

<div class="table-wrapper downloadable-products">
    <table id="my-downloadable-products-table" class="data table table-downloadable-products">
        <thead data-bind="click: getUser"><tr>
            <th>Prefix</th>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
            <th>Authorization Level</th>
            <th>Created At</th>
            <th>Status</th>
            <th>Actions</th>
        </tr></thead>
        <tbody data-bind="foreach: userList">
            <tr>
                <td data-bind="text: prefix"></td>
                <td data-bind="text: firstname"></td>
                <td data-bind="text: lastname"></td>
                <td data-bind="text: email"></td>
                <td data-bind="text: authorization_level"></td>
                <td data-bind="text: created_at"></td>
                <td data-bind="text: status"></td>
            </tr>    
        </tbody>
    </table>
</div>

Javascript:

define([
    'ko',
    'uiComponent',
    'mage/url',
    'mage/storage',
    ],
    function (ko, Component, urlBuilder, storage) 
    {   
        'use strict';
        return Component.extend({
            defaults: {template: 'Test_Account/userlist',},
            userList: ko.observableArray([]),
            errorMessage : ko.observable(),
            getUser: function () {
                var self = this;
                var serviceUrl = urlBuilder.build('account/useraccounts/user');
                return storage.post(serviceUrl,''
                ).done(function (response) {
                    self.userList.removeAll();
                    response.forEach(function(element) {
                        self.userList.push(element);
                    });
                }
                ).fail(function (response) {
                    self.errorMessage = response;});
            },
        });
    }
);

Answer 1

Try to call getUser from initialize method, like:

/** @inheritdoc */
initialize: function () {
    this._super();
    this.getUser();
    return this;
}

So js looks like:

define([
        'ko',
        'uiComponent',
        'mage/url',
        'mage/storage',
    ],
    function (ko, Component, urlBuilder, storage)
    {
        'use strict';
        return Component.extend({
            defaults: {template: 'Test_Account/userlist',},
            userList: ko.observableArray([]),
            errorMessage : ko.observable(),
            /** @inheritdoc */
            initialize: function () {
                this._super();
                this.getUser();
                return this;
            },
            getUser: function () {
                var self = this;
                var serviceUrl = urlBuilder.build('account/useraccounts/user');
                return storage.post(serviceUrl,''
                ).done(function (response) {
                        self.userList.removeAll();
                        response.forEach(function(element) {
                            self.userList.push(element);
                        });
                    }
                ).fail(function (response) {
                    self.errorMessage = response;});
            },
        });
    }
);