Topic: Cannot read property 'toString' of null when searching in table

jan.richter pro asked 4 years ago


Hello I getting these errors when i start typing in the search box:

task-queue.component.html:3 ERROR TypeError: Cannot read property 'toString' of null
at mdb-table-editor.js:309
at Array.some (<anonymous>)
at mdb-table-editor.js:304
at Array.filter (<anonymous>)
at MdbTableEditorDirective.push../node_modules/mdb-table-editor/fesm5/mdb-table-editor.js.MdbTableEditorDirective.filterIterableArray (mdb-table-editor.js:299)
at MdbTableEditorDirective.push../node_modules/mdb-table-editor/fesm5/mdb-table-editor.js.MdbTableEditorDirective.performSearch (mdb-table-editor.js:336)
at Object.updateDirectives (task-queue.component.html:3)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:23911)
at checkAndUpdateView (core.js:23307)
at callViewAction (core.js:23548)

My Component TS:

@ViewChild('tableTasks') mdbTableEditor: MdbTableEditorDirective;
modalRef: MDBModalRef;
editTaskForm: FormGroup;
headElements = ['ID', 'Předmět', 'Zadání', 'Termín', 'Kategorie', 'Status', 'Ticket', 'Řešitel', 'Zadavatel'];
visibleItems = 10;
searchTaskText = '';
ngOnInit() {
    this.elements = this.route.snapshot.data['queue'];
    this.elements.map((task: Task, index) => {
        this.task_time = [];
        if (!task.finished_at) {
            const deadline = new Date(task.deadline);
            const createdate = new Date(task.created_date);
            const currentdate = new Date();

            const full_diff = Math.abs(createdate.getTime() - deadline.getTime());
            const due_diff = Math.abs(currentdate.getTime() - deadline.getTime());

            const full_diffDays = Math.ceil(full_diff / (1000 * 3600 * 24));
            const full_diffHrs = Math.floor((full_diff % (1000 * 3600 * 24)) / 3600000);
            const full_diffMins = Math.round(((full_diff % (1000 * 3600 * 24)) % 3600000) / 60000);

            const due_diffDays = Math.ceil(due_diff / (1000 * 3600 * 24));
            const due_diffHrs = Math.floor((due_diff % (1000 * 3600 * 24)) / 3600000);
            const due_diffMins = Math.round(((due_diff % (1000 * 3600 * 24)) % 3600000) / 60000);
            if (currentdate < deadline) {
                const percentage = (((full_diff - due_diff) * 100) / full_diff);
                this.elements[index].task_time = {
                    percentage: percentage,
                    time_fond: full_diffDays + ' dnů, ' + full_diffHrs + ' hodin, ' + full_diffMins + ' minut',
                    due: due_diffDays + ' dnů, ' + due_diffHrs + ' hodin, ' + due_diffMins + ' minut',
                    overdue: false
                }
            } else {
                this.elements[index].task_time = {
                    percentage: 100,
                    time_fond: full_diffDays + ' dnů, ' + full_diffHrs + ' hodin, ' + full_diffMins + ' minut',
                    due: false,
                    overdue: due_diffDays + ' dnů, ' + due_diffHrs + ' hodin, ' + due_diffMins + ' minut'
                }
            }
        } else {
            const deadline = new Date(task.deadline);
            const createdate = new Date(task.created_date);
            const finishdate = new Date(task.finished_at);

            const full_diff = Math.abs(createdate.getTime() - deadline.getTime());
            const due_diff = Math.abs(finishdate.getTime() - deadline.getTime());

            const full_diffDays = Math.ceil(full_diff / (1000 * 3600 * 24));
            const full_diffHrs = Math.floor((full_diff % (1000 * 3600 * 24)) / 3600000);
            const full_diffMins = Math.round(((full_diff % (1000 * 3600 * 24)) % 3600000) / 60000);

            const due_diffDays = Math.ceil(due_diff / (1000 * 3600 * 24));
            const due_diffHrs = Math.floor((due_diff % (1000 * 3600 * 24)) / 3600000);
            const due_diffMins = Math.round(((due_diff % (1000 * 3600 * 24)) % 3600000) / 60000);
            if (finishdate < deadline) {
                const percentage = (((full_diff - due_diff) * 100) / full_diff);
                this.elements[index].task_time = {
                    percentage: percentage,
                    time_fond: full_diffDays + ' dnů, ' + full_diffHrs + ' hodin, ' + full_diffMins + ' minut',
                    due: due_diffDays + ' dnů, ' + due_diffHrs + ' hodin, ' + due_diffMins + ' minut',
                    overdue: false
                }
            } else {
                this.elements[index].task_time = {
                    percentage: 100,
                    time_fond: full_diffDays + ' dnů, ' + full_diffHrs + ' hodin, ' + full_diffMins + ' minut',
                    due: false,
                    overdue: due_diffDays + ' dnů, ' + due_diffHrs + ' hodin, ' + due_diffMins + ' minut'
                }
            }
        }
        console.log(task);
    });
    console.log(this.elements);
    this.mdbTableEditor.dataArray = this.elements;

    this.editTaskForm = this.formBuilder.group({
        taskSolver: ['', Validators.required],
        taskSubject: ['', Validators.compose([Validators.required, Validators.minLength(2), Validators.maxLength(100)])],
        taskMaintask: ['', Validators.required],
        taskDeadlineDate: ['', Validators.required],
        taskDeadlineTime: ['', Validators.required]
    });
    this.editTaskForm.get('taskSolver').valueChanges.subscribe((user_id) => {
        this.userService.getUser(user_id).subscribe((data: any) => {
            this.solver = data;
        }, error => {
            console.log(error);
        });
        console.log(this.solver);
    });
}

My Component HTML:

<div class="row">
<div class="col-md-12 mx-auto my-2">
    <div class="row w-100 d-flex justify-content-between mx-auto">
        <div class="col-md-3 d-flex align-items-center">
            <span class="font-weight-bolder">Zobrazit</span>

            <select class="browser-default custom-select mx-2" [(ngModel)]="visibleItems"
                    (ngModelChange)="visibleItems = +$event" style="width: unset;">
                <option value="10" selected>10</option>
                <option value="25">25</option>
                <option value="50">50</option>
                <option value="100">100</option>
            </select>

            <span class="font-weight-bolder">záznamů</span>
        </div>

        <div class="col-md-6 md-form my-1 text-right d-flex justify-content-between align-items-center">
            <input mdbInput type="search" class="form-control form-control-sm ml-2" [(ngModel)]="searchTaskText">
            <label class="font-weight-bolder mb-0">Hledat: </label>

        </div>
    </div>
    <table mdbTableEditor class="table table-striped z-depth-1" [itemsPerPage]="visibleItems"
           #tableTasks="mdbEditor"
           (rowHighlight)="highlightedTaskRow = $event">
        <thead>
        <tr>
            <th
                    *ngFor="let head of headElements; let i = index"
                    scope="col"
                    [mdbTableSort]="tableTasks.dataArray" [sortBy]="headElements[i]"
            >{{head | titlecase}}
                <mdb-icon fas icon="sort" class="ml-1"></mdb-icon>
            </th>
        </tr>
        </thead>
        <tbody id="mdbEditor-TableTaskBody">
        <tr *ngFor="let item of tableTasks.performSearch(this.searchTaskText); let i = index">
            <td>{{item.id}}</td>
            <td>
                {{item.subject}}<br/>
                <mdb-badge *ngIf="item.finished_at" pill="true" success="true" class="ml-1">dokončeno</mdb-badge>
                <mdb-badge *ngIf="!item.finished_at && !item.deleted_date" pill="true" warning="true" class="ml-1">
                    ve frontě
                </mdb-badge>
                <mdb-badge *ngIf="!item.task_time.due && !item.deleted_date" pill="true" danger="true" class="ml-1">
                    po termínu
                </mdb-badge>
                <mdb-badge *ngIf="item.deleted_date" pill="true" danger="true" class="ml-1">smazáno
                    (dne: {{item.deleted_date | date:'dd.MM.yyyy HH:mm'}})
                </mdb-badge>
            </td>
            <td>{{item.maintask | truncateText: 300}}</td>
            <td>{{item.deadline | date:'dd.MM.yyyy HH:mm'}}</td>
            <td *ngIf="item.tasks_category">{{item.tasks_category.name}}</td>
            <td *ngIf="item.status">{{item.status.name}}</td>
            <td *ngIf="item.ticket"><a routerLink="/tickets/{{item.ticket.id}}">{{item.ticket.subject}}</a></td>
            <td *ngIf="!item.tasks_category">TEST</td>
            <td *ngIf="!item.status">TEST</td>
            <td *ngIf="!item.ticket"></td>
            <td>
                <img src="assets/img{{item.solver.personalphoto}}"
                     class="img-fluid rounded-circle img-responsive avatar-xs mr-1"
                     alt="profilový obrázek"/>{{item.solver.firstname}} {{item.solver.secondname}}
            </td>
            <td>
                <img src="assets/img{{item.creator.personalphoto}}"
                     class="img-fluid rounded-circle img-responsive avatar-xs mr-1"
                     alt="profilový obrázek"/>{{item.creator.firstname}} {{item.creator.secondname}}
            </td>
            <td><a routerLink="/tasks/detail/{{item.id}}">
                <mdb-icon far icon="search"></mdb-icon>
            </a></td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
            <td colspan="9">
                <div class="d-flex flex-center">
                    <span>Zobrazuji {{tableTasks.paginationInfo.firstItem}}
                        až {{tableTasks.paginationInfo.lastItem}}
                        z {{tableTasks.paginationInfo.allItems}} záznamů</span>
                    <div class="flex-1"></div>
                    <mdb-icon fas icon="angle-left" size="lg" (click)="tableTasks.prevPage()" class="p-2"
                              [ngClass]="{'disabled text-muted': tableTasks.disablePrevious()}"
                              mdbWavesEffect></mdb-icon>
                    <mdb-icon fas icon="angle-right" size="lg" (click)="tableTasks.nextPage()" class="p-2"
                              [ngClass]="{'disabled text-muted': tableTasks.disableNext()}"
                              mdbWavesEffect></mdb-icon>
                </div>
            </td>
        </tr>
        </tfoot>
    </table>
</div>

Can you help me?

THX. JR JON.CZ s.r.o.


Damian Gemza staff commented 4 years ago

Could you please provide me with reproduction steps, how can I reproduce your problem?

Or, if it's possible - please send me your app via email: d.gemza@mdbootstrap.com

There may be a few possible problems which will throw this error.


jan.richter pro commented 4 years ago

Hello, I sent you email with APP source code a week ago, can you help me pls with this now? It's big problem with filtering in our APP. THX for reply.


jan.richter pro answered 4 years ago


any solution for this problem pls? I have sent you email with source code last week. THX for reply.


Damian Gemza staff commented 4 years ago

Dear @jan.richter

I have answered your email You have attached no application in your email message.

Best Regards,

Damian


jan.richter pro commented 4 years ago

Hello MDS return error i miss that, I've just sent you a email, with link for download app. Thanks


jan.richter pro answered 4 years ago


ONE OF TASKS IN JSON RESPONSE FROM BACKEND:

0:
category_id: null
created_by: 1
created_date: "2019-06-11T01:33:00.558Z"
creator: {id: 1, authorized: true, emailverify: true, password: "", workemail: "jan.richter@jon.cz", …}
deadline: "2019-06-12T16:30:00.000Z"
deleted_date: null
finished_at: null
id: 3
maintask: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Etiam commodo dui eget wisi. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nullam sit amet magna in magna gravida vehicula. Cras pede libero, dapibus nec, pretium sit amet, tempor quis. Etiam bibendum elit eget erat. Nullam sit amet magna in magna gravida vehicula. Proin in tellus sit amet nibh dignissim sagittis. Duis condimentum augue id magna semper rutrum. Duis ante orci, molestie vitae vehicula venenatis, tincidunt ac pede. Maecenas lorem. Vivamus porttitor turpis ac leo. In rutrum. Aliquam id dolor. Nullam sit amet magna in magna gravida vehicula. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? In rutrum.↵↵Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo. Nulla est. Suspendisse sagittis ultrices augue. Maecenas ipsum velit, consectetuer eu lobortis ut, dictum at dui. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Nulla quis diam. Donec vitae arcu. Cras pede libero, dapibus nec, pretium sit amet, tempor quis. Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Phasellus rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis condimentum augue id magna semper rutrum. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam. Nunc dapibus tortor vel mi dapibus sollicitudin. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Praesent id justo in neque elementum ultrices.↵↵Pellentesque pretium lectus id turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Donec iaculis gravida nulla. Aliquam ornare wisi eu metus. Mauris elementum mauris vitae tortor. Nunc dapibus tortor vel mi dapibus sollicitudin. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Curabitur vitae diam non enim vestibulum interdum. Morbi scelerisque luctus velit. In dapibus augue non sapien. Aliquam erat volutpat. Nulla est. Integer in sapien. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Morbi imperdiet, mauris ac auctor dictum, nisl ligula egestas nulla, et sollicitudin sem purus in lacus. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Fusce tellus. Aliquam in lorem sit amet leo accumsan lacinia. Suspendisse sagittis ultrices augue.↵↵Nullam at arcu a est sollicitudin euismod. Aliquam in lorem sit amet leo accumsan lacinia. Etiam quis quam. Integer in sapien. Aliquam erat volutpat. Duis pulvinar. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Nullam lectus justo, vulputate eget mollis sed, tempor sed magna. Integer vulputate sem a nibh rutrum consequat. Nunc dapibus tortor vel mi dapibus sollicitudin. Vivamus ac leo pretium faucibus. Pellentesque pretium lectus id turpis. Integer tempor. Pellentesque ipsum. Etiam posuere lacus quis dolor. Etiam bibendum elit eget erat. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?↵↵Sed ac dolor sit amet purus malesuada congue. Donec vitae arcu. Aenean id metus id velit ullamcorper pulvinar. Morbi imperdiet, mauris ac auctor dictum, nisl ligula egestas nulla, et sollicitudin sem purus in lacus. Curabitur vitae diam non enim vestibulum interdum. Quisque porta. Donec vitae arcu. Curabitur sagittis hendrerit ante. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. In dapibus augue non sapien. Maecenas fermentum, sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra metus odio a lectus. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Etiam posuere lacus quis dolor. In dapibus augue non sapien. Duis condimentum augue id magna semper rutrum. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Fusce nibh."
solution: null
solver: {id: 1, authorized: true, emailverify: true, password: "", workemail: "jan.richter@jon.cz", …}
status: null
status_id: null
subject: "TEST TASK 2"
task_time: {percentage: 9.823737567005866, time_fond: "2 dnů, 14 hodin, 57 minut", due: "2 dnů, 11 hodin, 7 minut", overdue: false}
tasks_category: null
ticket: null
ticket_id: null
updated_date: "2019-06-11T01:33:00.558Z"
user_id: 1


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Opened

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.5.1
  • Device: MacBook PRO
  • Browser: Chrome
  • OS: OSX
  • Provided sample code: No
  • Provided link: No