How to use app.request.json in app root and get data in component via app.data

Dear all,
Can anyone please help on how to use app.request.json/ajax call in app root and get the data in component as per below via app.data? In have seen the examples with static data and tried it, it works. Though I can’t get to use a ajax call.

Thank you all in advance.

In app root:
var app = new Framework7({
name: ‘avo’,
id: ‘io.framework7.testapp’,
root: ‘#app’,
theme: theme,
data: function () {
return {
cards:[],
};
},
ready:function(){
this.getCards();
},
methods: {
getCards: function(){
app.request.json(‘http://localhost:8080/avo/carditemlist’).success(function(reponse) {
this.cards = response.data;
});
},
},
routes: routes,
});

In component

im new to f7. I always worked with f7-vue
But i didnt see in the docs "ready () {}"
but i test this, and it works

app.request.json('https://jsonplaceholder.typicode.com/posts/5', function (res){console.log(res)})
1 Like

Thanks pvtallulah! I have solve this way in a component:

<script>
  export default {
    data() {
      return {
        carditemlist: []
      };
    },

    mounted() {
      const self = this;
      const app = self.$f7;
      app.request.json('http://localhost:8080/avocash/carditemlist',
        function(data) {
          self.carditemlist = data;
          //  app.dialog.alert(data)
          console.log(data);
        });
    },
  };
</script>