Displaying row data in mdbtable using api call


Topic: Displaying row data in mdbtable using api call

evioxtech pro asked 4 years ago

I am trying to display row data in mdb datatable but not able to show it.I can see the data on my console and also captured in the axios object.But cannot render it in the row. I am using VUE MDB PRO.Please help  
 } ], rows: [] } }; }, mounted() { axios({method: "GET", "url": "http://localhost:8000/api/v1/product/10"}).then(result => { this.rows = result.data; console.log(this.rows.name); }, error => { console.error(error); });

Mikołaj Smoleński staff answered 4 years ago

Hi there, There are two ways to import data to our mdbDatatables: a) By manually put rows into it. Here's the example: https://mdbootstrap.com/docs/vue/tables/datatables/#basic-example b) By importing data from API: https://mdbootstrap.com/docs/vue/tables/datatables/ - 'API' tab Did You try one of these methods? Best Regards

evioxtech pro answered 4 years ago

<template> <mdb-datatable :data="data" striped bordered /> </template> <script> import { mdbDatatable } from 'mdbvue'; export default { name: 'DatatablePage', components: { mdbDatatable }, data() { return { data: { columns: [ { label: 'Name', field: 'name', sort: 'asc' }, { label: 'Position', field: 'position', sort: 'asc' }, { label: 'Office', field: 'office', sort: 'asc' }, { label: 'Age', field: 'age', sort: 'asc' }, { label: 'Start date', field: 'date', sort: 'asc' }, { label: 'Salary', field: 'salary', sort: 'asc' } ], rows: [] } } } }; </script> <style> </style>
mounted() { axios({method: "GET", "url": "http://localhost:8000/api/v1/product/10"}).then(result => { this.rows = result.data; console.log(this.rows.name); }, error => { console.error(error); });

I am passing rows data to the through the mounted function to the rows[] data field.But still not able to render it
 

Mikołaj Smoleński staff answered 4 years ago

To load data from API please try this code:
<template>
  <mdb-datatable
    :data="https://YOUR_API_URL"
    striped
    bordered
  />
</template>

<script>
import { mdbDatatable } from 'mdbvue';

export default {
  name: 'DatatablePage',
  components: {
    mdbDatatable
  }
};
</script>
Best Regards

evioxtech pro answered 4 years ago

Ahh Ok got it ..Thanks Mikolaj

evioxtech pro answered 4 years ago

But how you define the POST OR GET method from the API call in this section
:data="https://YOUR_API_URL" ?

Mikołaj Smoleński staff answered 4 years ago

You just need to link to .json API. There is no need to define method of this call. Best Regards

I am using your Vue Demo project to write code. I am getting the following error when following your advice:

  • invalid expression: Unexpected token :

The "colon" is not valid and makes the App crash


Mikołaj Smoleński staff commented 3 years ago

Hi there, In our demo there is an example with datatables API call. Is it also not working properly?


I just noticed the error in the documentation. And I can't believe I didn't spot it earlier. The attribute value should be in both double quotes and in single quotes: like this: "'https://YOUR_API_URL'". This will make the API-URL version work.


Magdalena Dembna staff premium commented 3 years ago

Hi, thank you for letting us know about this mistake. Kind regards, Magdalena


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: Pro
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 4.6.0
  • Device: Laptop
  • Browser: Chrome
  • OS: Mojave
  • Provided sample code: Yes
  • Provided link: Yes
Tags