Topic: Displaying row data in mdbtable using api call

evioxtech pro asked 6 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); });

Webbkameror.se free answered 5 years ago


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 commented 5 years ago

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


Webbkameror.se free answered 5 years ago


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 5 years ago

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


Mikołaj Smoleński staff answered 5 years ago


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

evioxtech pro answered 5 years ago


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

evioxtech pro answered 5 years ago


Ahh Ok got it ..Thanks Mikolaj

Mikołaj Smoleński staff answered 5 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 5 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 5 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

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

  • ForumUser: 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