Passing data from JSON

Questions
1

Hello everyone I fetched data using:

app.request({
                            url: 'http://localhost/assaa-backend/fetch.php',
                            dataType: 'json',
                            method: 'GET',
                            cache: true,
                            tryCount: 0,
                            retryLimit: 3,
                            timeout: 1000,
                            crossDomain: true,
                            success: function(data) {
                                console.log(data);
                            },
                        });

Now I want to pass returned data to data object here:

 data: function() {
                    return {
                        title: 'Hello World',
                        names: ['John', 'Vladimir', 'Timo'],
                    }
                },

before I pass it to my template.

Please if someone solved this you can help me

2

Depending from where you call the request it’s just:

 const self = this;
 success: function(data) {
       this.title = data.title;   // or whatever
       this.names = data.names; // or whatever
},

is that what you mean?

3

If you mean you are doing it on page load, then you need to return Promise in data:

data() {
  return new Promise((resolve, reject) => {
    app.request({
      // ...
      success(data) {
        // resolve promise with what will be set as data
        resolve({
          title: data.title,
          names: data.names,
        })
      }
    });
  });
}

If you are doing it in some method then use what @tiptronic suggested

4

Hello, please help me solve it, here is what I mean Json to Template7 - F7 V2

5

Framework7 v1 was much easier to pass json data to a html template using getJSON, F7 v2 really confuses me

6

Hm - I don’t see any change in that regard from v1 to v5. It’s the same Vue.js reactivity in both versions. And how much easier can it get as:

setMyData = (data) => {
   this.title = data.title;   // or whatever
   this.names = data.names; // or whatever
}

?

7

I am a new programmer and i don’t have a lot of experience but i love framework7
i fetched data in form of json from a php API using a request method
var self = this;
self.$app.request.get(‘http://localhost/ghetto/Homepage-data.php’, function (data) {
var Homepage_data = data;
console.log(Homepage_data);
});

this data returns about 100 rows from database … how can i pass this data to the page…?? for dispalying…? i am so desperate please i am asking for your help… please give me an example i can work with or learn from

i have tried promises…
template context
routing all have failed or i don’t know hoe to use them…
F7 V5.5.4 with cordova and webpack bundler…

8

  1. Read the docs

  2. then start with something like this (this example uses F7Vue):

      <template>
   <f7-page name="list">
     <f7-navbar title="Data"></f7-navbar>
     <f7-list>
       <f7-list-item
         v-for="(thing) in data"
         :key="thing"
         :title="thing"
       ></f7-list-item>
     </f7-list>
   </f7-page>
 </template>
 <script>
   export default {
     data: function () {
       return {
         data: <your data>,
       };
     }
   };
 </script>