Display Database Data in Frontend via API Call

Questions
1

Hi guys,

I am new to APP Development and I am currently trying to build my first Framework7 PWA.
In my case I would like to display data from my DB in the PWA frontend by using an API request.
I don’t know if this is the best way to do it, but it was the only one, i found so far to realise this.

My problem is, it doesn’t show any data from database in my frontend. I tried to load the Data via Framework7.request.json. This works already. Because i can display the data via browser console. Afterwards I tried to store this data in a variable, so I can access it via a javascript call. Is this the best way to do this? I don’t know if there is a much better way to do this. Through research I found this way:

app
app463×799 105 KB

Is this the best way to do this?
I am not sure, if it’s possible to store var data in root data object. Is it?

Thanks for all your help!

2

It depends on your app, but it is fine.

And you need to keep in mind that requests are async, so more likely you won’t see anything in console.log(title)

So you can load data directly in component like in this examples for data() https://framework7.io/docs/router-component.html#component-options

3

Thank you for the quick reply!

But the problem is, I can‘t see anything in my frontend for the „movieItem“.
When I change the stored data in my app.js for „movieLists“ in like let’s say something like:

movieLists: {
title: ‘Hello‘,
description: ‘World‘,
}

Then it‘s totaly fine and is displayed in my frontend. But when I want to display the variable data nothing shows up.

4

You should properly update component data to force component to re-render. It should be done with $setState method https://framework7.io/docs/router-component.html