The searchable_bootstrap_table from rootviii

Table won't load until keyup when fetching data

I'm new to javascript and trying so this might be a naive question but I can't figure out what is going on.

I am trying to utilise your code to filter a table. I put the data directly into the array as per your example code, it works fine. I load the page and the table shows.

So this works:

function getTableData() {
    // simulate fetching table data from the back-end:
    tableArray = [
        ['1004', 'Incident', 'Hello there', 'P2', 'Mantis Flow', "Tue, 07 Jun 2022 14:09:00 GMT", "Tue, 07 Jun 2022 14:09:00 GMT", "Tue, 07 Jun 2022 14:09:00 GMT", "True" / "True"],
        ['1005', 'Request', 'Help, 'P2', 'Marty Miller-Crispe', "Tue, 07 Jun 2022 14:09:00 GMT", "Tue, 07 Jun 2022 14:09:00 GMT", "Tue, 07 Jun 2022 14:09:00 GMT", "True" / "False"],

    ];
    console.log(tableArray)
    return tableArray
}

However, I need to load the data from my database. When I do that the table does not show until after I do a 'keyup' in the search field. For example just pressing the back key in the search box will show the table data.

This is my code for fetching the data:

function getTableData() {
    let tableArray = [];
    fetch('/_my_worktable/').then(function(response){
        response.json().then(function(data){
            for(let i = 0, l = data.length; i < l; i++) {
                let ticket = data[i].ticket_number.toString();
                let type = data[i].type;
                let short = data[i].short_desc;
                let priority = data[i].priority.priority;
                let requester = data[i].requester.full_name;
                let created = data[i].created_at;
                let respond_by = data[i].sla_respond_by;
                let resolve_by = data[i].sla_resolve_by;
                let respond_breach = data[i].sla_response_breach.toString();
                let resolve_breach = data[i].sla_resolve_breach.toString();

                tableArray.push([ticket, type, short, priority, requester, created, respond_by, resolve_by, respond_breach, resolve_breach]);
            };
        });
    });
    return tableArray;
};

I put some console.log lines in to see that the data is actually loaded. For example if I put a line in like so:

loadTableData(searchText = null) {
        return new Promise((resolve) => {
            let tableRows = '';
            console.log(this.tableData)
            this.tableData.forEach((row) => {
                console.log(row)
                if (!(searchText) || row.join('').includes(searchText)) { ... etc

the first console.log(this.tableData) shows my array in the console
but the second console.log(row) shows no result in the console until I enter something (even back space) in the search box.
Note, I am using this.tableData.forEach in the code above just as an experiment to see if it made any difference to using your original code of for(let row in this.tableData) but both methods have the same behaviour.

I don't understand what is going on. Can you see what I'm doing wrong?

EDIT: I realise this is my lack of knowledge with how promises work. I have now got this working. I would just delete this issue but I can't see how.

rootviii / searchable_bootstrap_table Goto Github PK

searchable_bootstrap_table's People

Contributors

Stargazers

Watchers

searchable_bootstrap_table's Issues

screenshot

Table won't load until keyup when fetching data

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent