data.indexOf is not a function error in [tabulator]-CodePudding

data.indexOf is not a function error in Tabulator JavaScript Library.

Complete 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 setup as described in the doc, browser based so tabulator.js and tabulator.css in the location that is in the html. Nothing else 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 >Datamanagement Maturity Assessment</h1>

    <div id="entree" ></div>
    <div ></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))
});

The assObj.get goes to a fetch class that gets the data from a MySQL database that gets the data via a PHP generic API. That all works. The data array with objects is transformed to javascript object OK. The Tabulator gives the above error.

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

Any suggestions? Setup wrong?

CodePudding user response：

dataArray is either empty or undefined. Check by console.log(dataArray)

CodePudding user response：

data.indexOf is not a function error in [tabulator] usually occurs when the data variable is not an array or does not have an indexOf method.

The indexOf method is a built-in method of the Array prototype that returns the first index at which a given element can be found in an array, or -1 if it is not present. It is used like this:

const fruits = ['apple', 'banana', 'mango'];
const index = fruits.indexOf('banana'); // returns 1

If the data variable is not an array or does not have an indexOf method, then calling data.indexOf() will result in an error.

To fix this error, you need to make sure that the data variable is an array or an object that has an indexOf method. If it is not, you will need to convert it to an array or find an alternative way to perform the operation you are trying to do.

For example, if data is an object, you could use the Object.values method to extract an array of the object's values, and then use the indexOf method on the resulting array:

const data = { a: 1, b: 2, c: 3 };
const values = Object.values(data); // [1, 2, 3]
const index = values.indexOf(2); // returns 1