search

Home  >  Q&A  >  body text

data.indexOf is not a function error that appears in

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粉004287665P粉004287665305 days ago478

reply all(1)I'll reply

  • P粉412533525

    P粉4125335252024-02-27 14:05:16

    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.

    reply
    0
  • Cancelreply