Tabulator - Using AJAX to retrieve a JSON document

I am currently working on importing a json file from an Azure blob container using Azure Data Factory.

Despite closely following the documentation and researching various resources on Stack Overflow, I am facing challenges with making the ajax request function properly.

After overcoming CORS issues to access the json file, I now encounter a Data Loading Error:

Data Loading Error - Unable to process data due to invalid data type
Expecting: array 
Received:  undefined 
Data:      undefined

In my initial assumption, I suspected that the BOM added at the beginning of the json file before the array could be causing the issue. This suspicion arose when I noticed the BOM preceding the array in the file preview in Chrome.

Nevertheless, I have manually removed the BOM and re-uploaded the file to the blob storage, yet the error persists.

Below is my Tabulator code integrated into an HTML file for loading:

var table = new Tabulator("#example-table", {
    ajaxConfig:{
        method: 'GET',
        mode: 'cors'
    },
    ajaxURL:"https://mihndbotblob.blob.core.windows.net/mihndbot-transcripts/finalTranscripts/2019-08-07.json",
    index:"MessageID",
    autoResize:true,
    layout:"fitData",
    placeholder:"Awaiting Data...",
    columns:[
        {title:"Type", field:"Type", visible:false},
        ...
    ],

    ajaxResponse:function(url, params, response){

        return response.data;
    },

    rowClick:function(e, row){
    alert("Row " + row.getData().id + " Clicked!!!!");
    },
});

The json data loads perfectly fine when done manually as shown below:

var tableData = [
    // JSON data here
];

The structure of the json file returned by the ajax call mirrors the one above, confirmed through the Chrome preview.

https://i.sstatic.net/6Agfy.png

I hit a roadblock in resolving the ongoing issue and would appreciate any insights or solutions to overcome it.

javascriptjsonajaxazure-data-factorytabulator

Answer №1

It seems that updating your ajaxResponse function with the following code snippet might be beneficial:

 ajaxResponse:function(url, params, response){
        //url - the URL of the request
        //params - the parameters passed with the request
        //response - the JSON object returned in the body of the response.

        return response.data.d; //pass the data array into Tabulator
    },

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

The process of extracting all arrays from a JSON object

Within my JSON object, there is a list of countries each with multiple regions stored in an array. My goal is to extract and combine all the regions into one single list. However, when I attempt to map the data, it does not consolidate all the regions as e ...

javascriptarraysjsonangulartypescript

Issue with the page not refreshing after performing an ajax request

In my custom component (which is an xhtml file with ui:composition inside), I have incorporated a file upload field. The process involves selecting a file which is then uploaded via AJAX, as illustrated in the code snippet below: <uc:fileUpload id="# ...

ajaxjsfjsf-2.2

What is the best way to interpret numerous rows of Form elements simultaneously?

What is the most efficient way to name form elements across rows for easy conversion into JSON format? Considering HTML does not have built-in Array support, what alternative method should be used? In each row, there are 2 text fields and 1 select dropdow ...

javascriptjqueryhtmljson

Concealing Components using Angular's ng-change Feature

I need help displaying or hiding an element in a form using ng-change or any other method you suggest. Here is the HTML snippet I am working with: <div ng-app ng-controller="Controller"> <select ng-model="myDropDown" ng-change="changeState( ...

javascripthtmlangularjs

A guide on verifying a phone number using just one character

I am looking to validate a phone number with only one character being allowed. For example, the format should be XXX-XXXXXXX where "-" is the only allowed character. Below is my validation function: function validatePhoneNumber() { if(addform.staff_m ...

javascripthtmlcss

Is there a way to retrieve data from my JSON file located in the public folder within Next.js 13.3?

My current challenge involves retrieving JSON data from the public folder. async function fetchData() { try { const response = await fetch('/data.json'); const jsonData = await response.json(); return jsonData; } catch (error) { ...

reactjsjsonnext.jsfetchnext.js13

Filtering a table based on user selection: specifying column, condition, and value using JavaScript

I am new to JavaScript and looking to implement real-time filtering on a table based on user input. My project utilizes Django and PostgreSQL for storing the table data. template <form action="" method="get" class="inline" ...

javascriptvue.jsfilter

It appears that my array is not being properly populated by my callback functions

I am encountering an issue with my callback functions. The objective of my code is to send 16 GET requests to a REST API in order to retrieve 16 distinct JSON files. These JSON files are then supposed to be converted into dictionaries representing the foot ...

javascriptjqueryjsoncallbackget

When attempting to preflight cross domain Ajax requests with a custom header using jQuery, the requests are consistently being terminated

I've been attempting to execute a cross domain POST request with custom headers, but the preflight is consistently being cancelled. I'm uncertain whether it's the browser or jQuery causing this cancellation as indicated in Chrome's "Ins ...

jqueryajaxrestcors

Utilize jQuery append() to create a grid layout using <td> tags

I need to integrate address information from an object into an HTML table using the append() method. The initial HTML table structure is as follows: <table class="shipping_information" border="1"> </table> To achieve this, I place the addre ...

javascriptjqueryhtml

Angular Bootstrap: How to Resolve the Error "Function $(...).collapse() is Undefined"

I'm a beginner with Bootstrap and I'm attempting to trigger the .collapse() function using JavaScript within an Angular controller when a user clicks on a link. The goal is to close the collapsible navbar when a link is clicked, as the routing in ...

javascriptjqueryangulartwitter-bootstrapbootstrap-4

Send an array to a function with specified criteria

My current code successfully splits an array, but I need to pass a value when the array condition is met. For example, here is how the value is split into an array: var myArr = val.split(/(\s+)/); If the array in position 2 is empty, I need to use ...

javascriptarraysnode.js

Implementing various event listeners for asynchronous JavaScript and XML requests (

Struggling to iterate through an ajax query and encountering a problem where the i value always defaults to 1. I'm not very well-versed in js so any suggestions on how to tackle this issue or possibly a better approach would be greatly appreciated. Th ...

javascriptajaxiteration

Why are my values not being applied to the model class in Angular 7?

I'm currently developing an online shopping website where I have defined my order Model class as shown below: import { User } from './user.model'; export class Order { constructor(){} amount: Number = 0; status: String = ""; date: ...

javascriptangulartypescript

What is the best way to cause an error to occur upon launching an ExpressJS server?

Below is a brief code snippet I've provided: ... const url = typeof process.env.url === 'string' ? process.env.url : {do not start a server} ... server.start(options, ({ port }) => console.log(`Server is running on http://localhost:${po ...

javascriptexpress

Increase performance by minimizing unnecessary component re-renders in Next.js using memoization

I am currently exploring the behavior of React within Next.js. I have an index.js page that displays one component Homecard three times and a button that increments a value. Each time I click on the button, all Homecard components are re-rendered. index. ...

javascriptreactjsnext.js

Enhancing Security with Spring and JSON Authentication

I have a Spring/Spring-MVC application that relies solely on JSON for communication. I am now facing the challenge of authenticating my application with Spring Security 3, which utilizes LdapAuthenticationProvider, via JSON. The default Spring Security su ...

jsonspringspring-mvcspring-security

Load data into Handsontable using AJAX when the site is freshly loaded

Could you please clarify the reason behind the functionality of this code: $(document).ready(function () { var container = document.getElementById('example'); function fetchData() { var dataResult = null; $.ajax({ ...

jqueryajaxhandsontable

Could a javascript loop be created to continuously activate a button with each iteration?

I have just started learning javascript and I am in the process of creating a website where users can change the background by simply clicking on a button. It's working perfectly fine so far, but I want to add another feature where the background imag ...

javascripthtmlcssloops

Counting words with JavaScript without using an input tag is a useful skill

Is there a way to count the words in a text using only p and span tags, without using input tags? How can this be achieved? <span class="word" id="word">Words Number</span> <p class="any" id="any"> ...

javascripthtml