How to resolve Uncaught TypeError: Cannot read property 'field' Tabulator

by

What I am trying to do:
I have data for a Tabulator table serialized and stored in my database. In this section of my code, I am retrieving and parsing the data. I need to get the column data into an array to put into my Tabulator table, which includes the column title as well as different settings like headerSort: false

The issue:

Uncaught TypeError: Cannot read property 'field' of undefined tabulator.js?ver=5.2.3:1615 
 at new Column (tabulator.js?ver=5.2.3:1615)
    at ColumnManager._addColumn (tabulator.js?ver=5.2.3:670)
    at tabulator.js?ver=5.2.3:650
    at Array.forEach (<anonymous>)
    at ColumnManager.setColumns (tabulator.js?ver=5.2.3:648)
    at Tabulator._buildElement (tabulator.js?ver=5.2.3:9562)
    at Tabulator._create (tabulator.js?ver=5.2.3:9418)
    at new Tabulator (tabulator.js?ver=5.2.3:8616)
    at displayEditTable (ccs-table-builder-script.js?ver=5.2.3:321)
    at Object.success (ccs-table-builder-script.js?ver=5.2.3:215)

Code:
ccs-table-builder-script.js

var obj = JSON.parse(data); //parses information from the database
var rows = obj['data'];
var columns = obj['titles'];
var colArray = [];
colArray.push(columns.forEach(restructureColumns));
 var editTable = new Tabulator("#ccs-editing-table", {
            data:rows,
            columns: colArray
}

function restructureColumns(item, index){
        
    console.log(item.field);
    console.log(item.title);

    return {title:item.title, field:item.field, editableTitle:true, editor:"textarea", headerSort:false, headerClick:function (e, column) {
            deleteColFunction(e, column);
        }};
}

Based on the console.log, I know that item.field and item.title are being read correctly.

Here’s the output of an item:
editableTitle: "true" editor: "textarea" field: "col1" headerClick: "undefined" headerSort: "false" title: "col1"

[The reason I am doing this is because I need headerSort and the like to look like headerSort: false not headerSort: "false"]

What I’ve Tried:
I have looked at other StackOverflow questions for similar issues, but I could not find a way to apply them to my own code.

I definitely think it’s an issue with my own code, not Tabulator. Specifically, I think the issue is with the ‘restructureColumns’ function where I am naming title:item.title and field:item.field.

103 thoughts on “How to resolve Uncaught TypeError: Cannot read property 'field' Tabulator”

Leave a Comment