Load JSON data from webservice

I am working on a Framework7 v5.7.8 application.

I want load JSON data from a external source and display it in the application.

Here is my script:

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

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

The data are not loaded and not available in console.

If it is core version then it should be:

self.$setState({products: data})

Hi Vladimir, thx for your replay.
But i got no JSON in my console.log.

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

        mounted() {
          const self = this;
          const app = self.$f7;
          app.request.json('http://localhost/ingo/test.php',
            function(data) {
              self.$setState({products: data});
              console.log(data);
            });
        },
      };
</script>

I added this lines code into my app.f7.html

Then something wrong with your server response, check console to debug it

Console looks good. No errors.
In network, the webservice will be called, but there is no respsonse in console
console.log(data);

It seems that the format of the test.php response is not a valid json.

To rule out that possibility, copy and paste the json obtained into a json validator like this: https://jsonlint.com/

If the data response is an array of objects, it should have the following format:

[
    {
     ....
    },
    {
     ....
    },
    {
     ....
    }
]
2 Likes