Topic: Datatables "data.map is not a function" during async, how do I fix this.

hpatti priority asked 3 months ago


Expected behavior

Working with the examples given in: https://mdbootstrap.com/docs/standard/data/datatables/#section-async-data

The async data function should work and not have any issues nor return that a function called in the docs is not a function with expected data formats.

Actual behavior

I have tried to get a single record from my database and display it in the data table to see if this is the right solution for my project. My project has been setup to return information in JSON format from the database, see app. A.

I am only using a subset of that data, in my app.js file is my data table code. I would greatly appreciate in knowing what I am doing wrong so I can stop getting: app.js:2202 Uncaught (in promise) TypeError: data.map is not a function and use the data table. See App B for my App.js

Resources (screenshots, code snippets etc.)

App A):

{
"id": 1,
"first_name": "Acolyte",
"last_name": "Support",
"preferred_name": null,
"phone": "(425) 610 - 7274",
"email": "helpdesk@pattisparadoxes.net",
"role_id": 1,
"role_name": "Super Admin",
"department_id": 1,
"user_department": "Acolyte Support",
"user_status": "Active",
"last_active": "2022-06-28",
"ls_id": 1,
"ls_name": "Audio",
"lic_id": 1,
"lic_name": "Admin",
"license_ends": "3000-01-01",
"updated_at": "2022-07-03T04:31:19.000000Z"

}

App B):

const columns = [
    {label: 'User ID', field: 'id'},
    {label: 'Phone', field: 'phone'},
    {label: 'Email', field: 'email'},
];
const asyncTable = new mdb.Datatable(
    document.getElementById('users-datatable'),
    { columns, }
);
fetch('/getUsers')
    .then((response) => response.json())
    .then((data) => {
        console.log(data);
        asyncTable.update(
            {
                rows: data.map((row) => ({
                    ...row,
                    id: row.id,
                    phone: row.phone,
                    email: row.email,
                })),
            },
            { loading: false }
        );
    });

kpienkowska staff answered 3 months ago


If you get this error your data may be stored differently than in the example: https://jsonplaceholder.typicode.com/users

In the example, there are objects stored in an array. Your code used with an example JSON works all right.https://mdbootstrap.com/snippets/standard/kpienkowska/4350024#js-tab-view

Please show what you receive from console.log in your APP B.


hpatti priority commented 3 months ago

Apologies, my backend was missing a configuration in how it was returning the information. In my console.log I got the above information in App A but what it was originally sending was incorrect.

Thank you for your patience and understanding.



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • User: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 4.4.0
  • Device: Desktop
  • Browser: Google Chrome
  • OS: Windows 11
  • Provided sample code: Yes
  • Provided link: Yes