Topic: load an mdbtable from an API

Webbkameror.se free asked 4 years ago


I expect to be able to load data to the data.rows object in "Created" our "Mounted" from an API call so that I can display data in my mdbtable

In actuality, this seems to be quite impossible. All attempts (I have struggled with this for the past 8 hours)

I have seen other users with the same question on this website. They have received the answer (which is also available in the documentation) that they should add the URL to the API in the :data variable like this:

 <mdb-datatable
:data="https://YOUR_API_URL"
striped
bordered />

This will make both Vue and Webstorm crash and protest since the ":" (colon) is an invalid operator. I see no other way of loading data from my database in to this table. What is the solution??


Webbkameror.se free answered 4 years ago


Yes, if the communication in the support threads and the in the documentation changes to reflect the fact the attribute value should be in both double quotes and in single quotes: "'https://YOUR_API_URL'", then I will be happy.


Magdalena Dembna staff commented 4 years ago

Thank you again for letting us know. Kind regards, Magdalena


Magdalena Dembna staff answered 4 years ago


Hi, Thank you for letting us know about this mistake, we'll fix it as soon as possible. Does it solve your problem? Kind regards, Magdalena


Magdalena Dembna staff answered 4 years ago


Hi, Unfortunately, right now for the code above to work correctly, the JSON data needs to structured in a following way: https://my-json-server.typicode.com/Rotarepmi/exjson/db . For now, the only solution I can propose would be to load you data in the lifecycle hook method and then pass them to data() in the required format. We are currently working on the better solution and we're sorry for the inconvenience. Best regards, Magdalena


Webbkameror.se free commented 4 years ago

Hi Magdalena,

I understand that you require a special format for it to work and I agree that it is a bad way to overcome this problem, but do you have comment on that it is invalid code to enter URLs in the attribute value for ‘data’? This means your current code example wouldnt work with the proper format either.

For your second suggestion, I have tried every single life cycle method to add the data, butnothing seems to affect the actual MDB-component’s data. I can see the data in the console though.


Webbkameror.se free commented 4 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



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: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 5.1.1
  • Device: Any
  • Browser: Any
  • OS: Any
  • Provided sample code: No
  • Provided link: No
Tags