Displaying row data in mdbtable using api call

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); });

Add comment

Mikołaj Smoleński staff answered 6 years ago

0 2 Best answer

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

Add comment

evioxtech pro answered 6 years ago

0 1 Best answer

<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

Add comment

Mikołaj Smoleński staff answered 6 years ago

0 2 Best answer

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

Add comment

evioxtech pro answered 6 years ago

0 0 Best answer

Ahh Ok got it ..Thanks Mikolaj

Add comment

evioxtech pro answered 6 years ago

0 0 Best answer

But how you define the POST OR GET method from the API call in this section

:data="https://YOUR_API_URL" ?

Add comment

Mikołaj Smoleński staff answered 6 years ago

0 1 Best answer

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

Add comment

Webbkameror.se answered 6 years ago

0 0 Best answer

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

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

Add comment

Webbkameror.se answered 6 years ago

0 0 Best answer

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

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

Add comment

Write

Create snippet

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

evioxtech

Pro User

34Support score
1Questions 3Answers

0Snippets likes 0Snippets