简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
data.indexOf is not a function error that appears in
P粉004287665
P粉004287665 2024-02-26 14:39:12
0
1
395

data.indexOf is not a function error in the Tabulator JavaScript library.

Full error message:

[Error] TypeError: data.indexOf is not a function. (In 'data.indexOf("{")', 'data.indexOf' is undefined)
    load (tabulator.js:6075)
    _loadInitialData (tabulator.js:7971)
    _create (tabulator.js:7841)
    (anonieme functie) (tabulator.js:7756)

and warning: 

Table Not Initialized - Calling the redraw function before the table is initialized may result in inconsistent behavior, Please wait for the `tableBuilt` event before calling this function

I used the settings described in the documentation, browser-based, so tabulator.js and tabulator.css are where they are in the html. Nothing else is done.

My HTML:

<!DOCTYPE html>
<html lang="nl">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="css/tabulator.css">
        <!-- <link rel="stylesheet" href="css/tabulator.css.map"> -->
        <link rel="stylesheet" href="css/layout.css">
        <link rel="stylesheet" href="css/style.css">
        <script defer src="js/tabulator.min.js"></script>
        <script defer src="js/crud.js"></script>
        <script defer src="js/data.js"></script>
        <script defer src="js/assess.js"></script>
        <title>DMMA</title>
    </head>
    <body>
        <main id="home">
            <h1 class="center-text dark-blue-text">Datamanagement Maturity Assessment</h1>
            <div id="entree" class="container"></div>
            <div class="output container"></div>
        </main>
    </body>
</html>

My javascript in assess.js: 

document.addEventListener('DOMContentLoaded', async function() {
  
  // the assObj is the data of assessment objects I want to retrieve
  const assObj = new dataProvider;
 
  // Use Tabulator
  assObj.get('api.php/records/AssmntPlusObjects')

    // .then(async dataArray => displayRecords(dta, false))   // Works!
    .then(dataArray => {
      let table = new Tabulator("#entree", {
        data: dataArray,
        autoColumns: true
      })
    })
    .catch(err => displayError(err, null))
});

assObj.get Go to a get class that gets data from a MySQL database that gets data through the PHP Common API. It all works. Data array with objects converted to JavaScript objects OK. Tabulator gives the above error.

The website is on an internet provider host and I don't want to run another MySQL locally.

Any suggestions? Wrong setting?

P粉004287665
P粉004287665

reply all(1)
P粉412533525
P粉4125335252024-02-27 14:05:16 1 floor

The culprit was found! I need to get the records in dataArray using 

data: dataArray.records,

That's it!

I found this amazing because in the custom table function I built with data (displayRecords(dataArray, false)) it worked without the .records property.

Thanks for letting me know what dataArray is.

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！