Vue 3 using data from API

[igor.diasParticipant]

Hi!

I need to populate a JQXDataTable using data coming from an API response. To receive the data, I need to pass a config object, like the following:

const config = {
auth: {
username: <username>,
password: <password>,
},
headers: {
'Content-Type': 'application/json'
}
};

Reading JQXDataTable API, I understood that config should be passed as data in jqx.dataAdapter. Even though I did it, the table just keeps loading and doesn’t render table. Testing with an API that doesn’t need auth (like https://jsonplaceholder.typicode.com/posts), works smoothly. Could you, please, help me to get this right?

<template>
  <div>
    <jqx-data-table :source="dataTableSource" :columns="dataColumns"></jqx-data-table>
  </div>
</template>

<script>
import { ref, onMounted } from "vue";
import JqxDataTable from 'jqwidgets-scripts/jqwidgets-vue3/vue_jqxdatatable.vue';
import "jqwidgets-scripts/jqwidgets/styles/jqx.base.css";
import "jqwidgets-scripts/jqwidgets/jqxcore.js";
import "jqwidgets-scripts/jqwidgets/jqxdata.js";
import "jqwidgets-scripts/jqwidgets/globalization/globalize";

export default {
  components: {
    JqxDataTable,
  },
  data() {
    return {
      dataTableSource: new $.jqx.dataAdapter({
        datatype: 'json',
        data: config
        datafields: [
          <datafield>
        ],
        url: <api-endpoint> // Replace with your API endpoint
      }),
      dataColumns: [
        <columns>
      ]
    };
  }
};
</script>

<style> </style>

[svetoslav_borislavovParticipant]

Hi,

You may use the mounted lifecycle hook and fetch the data manually and you will recreate the dataAdapter with the fetched data
Here is an example of fetching the data: https://codesandbox.io/s/blissful-curie-tl4wm6

Best regards,
Svetoslav Borislavov

jQWidgets Team
https://www.jqwidgets.com/

[igor.diasParticipant]

Hi!

Thanks to the answer.

Actually, I found out that it works using jqxGrid document-ready function ( $(“#jqxgrid”).jqxDataTable({}) ). Changing to jqxDataTable I receive the following error: TypeError: $(…).jqxDataTable is not a function. Is there a way to use it as jqxDataTable?

Obs: I’m already using import JqxDataTable from ‘jqwidgets-scripts/jqwidgets-vue3/vue_jqxgrid.vue’

[igor.diasParticipant]

Actually, please ignore the above mensage. The real problem here is if it’s possible to do an API request that requires a token authentication. In my case, using axios and then applying as localdata works ok, but I would like to know if it’s possible using url + data method or beforesend function (or any other way).

[svetoslav_borislavovParticipant]

Hi,

The jqxDataAdapter may accept beforeSend function:
beforeSend(jqXHR, settings): A pre-request callback function that can be used to modify the jqXHR
Please visit the documentation of the jqxDataAdapter to get familiar with:
https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxdataadapter/jquery-data-adapter.htm?search=

Best regards,
Svetoslav Borislavov

jQWidgets Team
https://www.jqwidgets.com/

[SunwinearthParticipant]

nice

[Author]

Posts