How to get object property from API and set them to a store by matching field

Question

I'm trying to get a list of objects from an API request, add their property "loglevel to my store and show it in an existing table, linking these loglevels to each "jobId" but I'm having trouble doing so. I want it to request once when opening the page so that the values are up to date with the database. This is my model:

Ext.define('U4.fundamentals.backgroundjobs.model.BackgroundJobsMonitoringModel', {  
extend: 'Ext.data.Model',
fields: [
    { name: 'jobId', type: 'string', mapping: 'jobId'},
    { name: 'taskId', type: 'string', mapping: 'lastTaskRun.taskId'},
    { name: 'updatedAt', type: 'date', mapping: 'lastTaskRun.updatedAt'},
    { name: 'status', type: 'string', mapping: 'lastTaskRun.status'},
    { name: 'canRunOnDemand', type: 'boolean', defaultValue: true },
    { name: 'icon', persist: false },
    { name: 'logLevel', type: 'int'}
]});

This is my api request config in the store:

 proxy: {
    type: 'rest',
    api: {
        read: U4.getApiPath('server-jobs'),
        run: U4.getApiPath('server-jobs'),
        kill: U4.getApiPath('server-jobs/{jobId}/{taskId}/kill'),
        config: U4.getApiPath('server-jobs-configuration/loglevel/{jobId}'),
        async: U4.getApiPath('server-jobs-configuration/loglevel')
    },

sendConfigTaskRequest3: function () {
    var me = this;

    return new Promise(function (resolve, reject) {
        Ext.Ajax.request({
            url: U4.data.proxy.UrlTemplate.replaceParameters({}, me.proxy.api.async),
            method: 'GET',
            success: function (data) {
                resolve(data);
            },
            failure: function (data) {
                reject(data);
            }
        });
    });
}

The request doesn't take any arguments since it's a getallasync method.

I've tried setting up a function in the controller and calling it through render and afterrender listener but it did not work so far:

onConfigTaskRequestSuccess: function (grid, response) {
    var me = this;
    var store = grid.getStore();
    store.sendConfigTaskRequest3()
        .then(function (response) {
            var data = Ext.decode(response.responseText); // Decode the response

            // Loop through the data and set the LogLevel property for each row in the store
            Ext.each(data, function (item) {
                var record = store.findRecord('jobId', item.JobId); // Find the record in the store based on the jobId
                if (record) {
                    record.set('logLevel', item.LogLevel); // Set the LogLevel property of the record
                }
            });
        })
        .catch(function (error) {
            // Handle errors here
        });
},

Any help would be appreciated.

Update #1: This example of a dependant rendering on the render for 'jobId' column and 'loglevel' column does exactly what I want but it makes the same request for each row. If you could tell me a way to only make one request to the API and achieve the same results it would be perfect because I really cannot send this as it is with so man requests each time I open the page. This is the renderer on jobId:

renderer: function (value, metaData, record, rowIndex, colIndex, store, view) {
            Ext.defer(function () {

                var promise = store.sendConfigTaskRequest3();

                return new Promise(function (resolve, reject) {
                    promise.then(function (response) {
                        var data = Ext.decode(response.responseText);
                        Ext.each(data, function (item) {
                            var record = store.findRecord('jobId', item.jobId); // Find the record in the store based on the jobId
                            if (record) {
                                console.log("record log", item.jobId, item.logLevel);
                                record.set('logLevel', item.logLevel); // Set the LogLevel property of the record
                                console.log(record.get('logLevel'), "RECORD LOG");
                                resolve(true);
                            }
                        });
                    }).catch(function (error) {
                        reject(error);
                    })
                });
                
            }, 1500);

            return value;
        }

Renderer which depends on jobId renderer (loglevel):

{
        text: 'LowSignal',
        flex: 1,
        dataIndex: 'logLevel',
        renderer: function (value, metaData, record, rowIndex, colIndex, store, view) {
            if (value === 0) {
                return '<div class="u4f-backgroundjobs-alert-icon" style="height: 20px; width: 20px; margin:0px 43.33%" title="Full Log Activated!"></div>';
            } else {
                return 'Loading...';
            }
        },
        align: 'center',
        draggable: false,
        resizable: false,
    }

I got the API request to work. I can't seem to make the values stay on the store. I tried testing the functionality through a button for now. It updates the rows with the correct loglevel, but once I refresh the page it loses the values. Also I need this to run when I open the page, but if I add a listener "afterrender" or "render" with this function, the page breaks. — Weedosaurus, Apr 21 '23 at 09:53
It seems a bit complicated and cumbersome what you are trying to do. If there are values in the grid that you want to keep you can store them in the DB with a REST `create` or `update` methods and then simply reload the store. Then you don't have to use Ext.each. Also (AFAIK) REST in Ext only has 4 action methods (create, read, update, destroy), how are you calling run, kill, config and async? — Arthur, Apr 24 '23 at 19:32
The async name is temporary. It's a "read all" method. I ended up doing it by implementing the API call in the viewconfig. Thank you. — Weedosaurus, Apr 26 '23 at 08:35
Do you have control over the API? IMHO, it would be better that the server returns a complete dataset. Then you just have to load the store, no need to use Ext.each — Arthur, Apr 26 '23 at 16:19

score 0 · Answer 1 · answered Apr 26 '23 at 08:38

I ended up implementing the API call in the viewconfig, since it was not working on the afterrender or before render. Also in the Renderer function it would work, but it would make a call for each row of the table which I did not want. It ended up looking like this in the viewconfig of the grid:

viewConfig: {
    listeners: {
        viewready: function (view, store) {
            var ran = false;
            var store = view.grid.getStore();
            if (!ran) {
                Ext.defer(function () {

                    var promise = view.grid.getStore().sendConfigTaskRequest3();

                    return new Promise(function (resolve, reject) {
                        promise.then(function (response) {
                            var data = Ext.decode(response.responseText);
                            Ext.each(data, function (item) {
                                var record = view.grid.getStore().findRecord('jobId', item.jobId); // Find the record in the store based on the jobId
                                if (record) {
                                    console.log("record log", item.jobId, item.logLevel);
                                    record.set('logLevel', item.logLevel); // Set the LogLevel property of the record
                                    console.log(record.get('logLevel'), "RECORD LOG");
                                    resolve(true);
                                }
                            });
                        }).catch(function (error) {
                            reject(error);
                        })
                    });

                }, 1500);
                ran = true;
                return;
            }
        }
    }
},

This is where I saw the answer to it: https://stackoverflow.com/a/11223046/11626412 Giving credit where credit is due. — Weedosaurus, Apr 26 '23 at 14:24

How to get object property from API and set them to a store by matching field

1 Answers1