1

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;});
            },
        });
    }
);
0

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;});
            },
        });
    }
);
  • Thanks for your answer. Unfortunatelly it's not working. The functions is called at the start but it returns an error at "response.forEach(function(element)". Error: response.forEach is not a function. I added console.log(response); It surprisingly returns html code (the first 20 lines of the page). More surprisingly this code works when it's called by clicking on the table heade where I placed a click binding. How can I solve this? – Jens Jan 15 '18 at 8:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.