Populate tabulator table with nested data fetched through an ajax call

I received an API response from a store in JSON format containing three records at the first level.

The structure of the response includes data, error_no, msg fields.

Within the data field at the second level, I have data.items, data.total_pages, data.total_results.

Under data.items (at the third level), there are the specific records that need to be loaded into a Tabulator table. How can I extract and select only these items for loading into the table?

https://i.sstatic.net/pgV9g.jpg

function loadTableTab(tableData) {
    var table = new Tabulator("#table", {
        data:tableData, //set initial table data
        columns:[
            {title:"product_title", field:"product_title"},
            {title:"sale_price", field:"sale_price"},
        ],
    });
}

Answer №1

To format data in a way that Tabulator can handle, utilize the ajaxResponse callback. This callback is designed to process the response data and return an array of table data. In this scenario, the function should look like this:

function displayTabulatedData(tableData) {
    var dataTable = new Tabulator("#table", {
        data: tableData,
        ajaxResponse: function(url, params, response){
            return response.data.items;
        },
        columns:[
            {title:"Product Title", field:"product_title"},
            {title:"Sale Price", field:"sale_price"},
        ],
    });
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a customized Axios instance in Typescript can provide more flexibility and control over

I am looking to create an API with a customizable instance using Axios. Ideally, I want to be able to use a basic instance like this: api.get("url")... In addition, I would like to have the flexibility to add dynamic bodies and access them using something ...

How to dynamically reduce the number of columns in a textarea using jQuery according to its content

Does anyone know how to make a textarea shrinkwrap the text inside on blur? The default number of columns is 10 or 15 and I want the textarea to adjust its width based on the text content. I have tried the following code: $('textarea').on(&apos ...

Utilizing headless Chrome to automatically capture AJAX requests

Chrome officially supports running the browser in headless mode, allowing for programmatic control through the Puppeteer API and/or the CRI library. I've thoroughly explored the documentation but have not discovered a method to programmatically captu ...

Searching for empty array fields in a jsonb column using a PostgreSQL query

device_id | device ----------------------------- 9809 | { "name" : "printer", "tags" : [] } 9810 | { "name" : "phone", "tags" : [{"count": 2, "price" : 77}, {"count": 3, "price" : 37} ] } When running a postgres SQL query on a jsonb column n ...

The CSS transition fails to function correctly when rendering a React element within an array

When rendering a React component within an array using CSS transitions, I noticed that the elements in the array re-order and change style. Surprisingly, only the elements moving up have transitions applied, while the ones moving down do not. I expect all ...

What is the process for triggering a sorted output from my MongoDB database by simply clicking a button?

I'm struggling with sorting my collection by rating in my code. I have this snippet where I'm sending my collection to index.ejs: router.get('/', (req, res) =>{ FILM .find().limit(6) .then(films => res.render(& ...

Effective ways to engage with a window that is supervised by a different controller?

Although the question may appear vague initially, I struggled to find a better way to convey my idea. Let me elaborate on it in detail. In my SPA application, I have MasterController connected to the <html> tag. This MasterController consists of all ...

using node and express to route and pass variables to a required module

In my primary index.js file, I have the following code: var express = require('express') require("dotenv").config(); const db = require('./services/db_service').db_connection() const customers = require('./routes/custo ...

Ways to verify whether a user is not defined

My code includes a command that sends a Direct Message to a user, with the user being specified as follows: let user; if (message.mentions.users.first()) { user = message.mentions.users.first(); } else if (args[0]) { user = message. ...

Encountered an issue loading a resource due to a lost network connection while using Safari 9 and JBoss WildFly 8.2

After successfully deploying my War file to the JBoss Wildfly 8.2 server, I attempted to access the application link from a remote MAC machine. The application opened correctly, but some functionalities were not working properly. An error message popped u ...

It appears that the query parameters are impacting the speed at which the page loads

I am currently developing a project on this platform. It is using c9.io, an innovative browser-based collaborative programming IDE. The index.php file includes the following script: <?php $path = ltrim($_SERVER['REQUEST_URI'], '/&ap ...

What is the proper way to select the <ul> element within an FTL template?

Can someone provide guidance on how to target a <ul> container within a freemarker template using JavaScript? My goal is to display the content of this specific <ul> element in my FreeMarker template on the web page. Any suggestions on how I ...

Error: Unable to access 'map' property of an undefined variable in NextJS while using getStaticPaths

Currently facing an issue with dynamic routing in my Next.js project. I have a dynamic page [id].js and am trying to fetch data from an API. const res = await fetch(`myAPI`); const resData = await res.json(); const paths = resData.data.map((r) =&g ...

Tips for addressing the error message "Cannot PUT /":

I have been working on updating a local database using MongoDB for my project. Here is the code snippet I am using to update the data. The second part involves editing that redirects the updated data. I am not encountering any errors, so I am unable to i ...

Troubleshooting problem: Unable to restrict table selections - issue with Material UI table in React

I seem to be overlooking the simple solution here. Currently, I have a ternary on my table. If the length of the selected array is greater than a certain number, a table with disabled checkboxes is rendered. I also implement a different handleClick functio ...

Using Multithreading and the Subscribe/Publish Methodology in JavaScript

Is it true that JavaScript does not support multithreading? I am seeking expert advice on a specific scenario. I need to make an AJAX call and upon successful completion, trigger a set of events to update different parts of the UI simultaneously. Would ...

A step-by-step guide on incorporating universal CSRF tokens using JQuery AJAX

As part of my development work, I am in the process of creating jquery code that communicates with the server through ajax to input data into a database based on specific request parameters. My main concern at this point is the vulnerability to CSRF attac ...

The function Sequelize.create() does not exist

My attempts to push my DB with sequelize are not working, even though I have set up this schema for the DB: module.exports = (sequelize, DataTypes) => { const Problems = sequelize.define("Posts", { theme: { type: DataTypes.ST ...

The REST Client is reporting back with an HTTP status code of 401

Thank you for taking the time to read this! Overview: I have developed a JAVA REST client that authenticates with a username and password, returning a JSON response. Issue: I am encountering the following exception: Error in thread "main" java.io.IOExc ...

The picture is displayed just once, despite the fact that it was supposed to be returned 50 times within the loop

I'm encountering an issue while trying to use a for loop to render an image in a React component. The loop is not functioning as expected, resulting in the image being displayed only once on the screen even though the intention is to show the same ima ...