Loading External JSON data into Page

#1

Hello,

I am from web design background and Im trying to transition to building mobile app using web technologies (html5, css3, js). Framework7 is perfect place to start as I dont really have time to study other languages even vuejs or reactjs.

Im trying to build a kind of netflix kind of video app and I followed this and it didnt work.
https://framework7.io/docs/router-component.html#single-file-component

here’s my codes:






{{title}}



      <div class="list simple-list">
        <ul>
          {{#each shows}}
            <li>{{name}} from {{title}}</li>
          {{/each}}
        </ul>
      </div>
    </div>
  </div>
</template>
<!-- component styles -->
<style>
  .red-link {
    color: red;
  }
</style>
<!-- rest of component data and methods -->
<script>


  // script must return component object
  return {
    data: function () {
     // console.log(shows+"test");
      return {
        title: 'Show Catalog',
        shows:[],
 
      }
    },
    on: {
      pageInit: function () {
        this.$app.request.get('shows.json', function (data) {
           console.log(data);
          
        })

      },
      pageAfterOut: function () {
        // page has left the view
      },
    }
  }

</script>

here is the output:

tyjutyu
tyjutyu820×624 72.2 KB

The json on console appear but not in my html page? what went wrong?

#2

Где у вас $setState()?

#3

Я не использую это. Должен ли я использовать это? Я дам ему попробовать.

#4

[Edit] ok i see that it worked however. My json has only 3 data but the page displays so many data and they are empty. the codes are below:

<!-- component template -->
<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="title">{{title}}</div>
      </div>
    </div>
    <div class="page-content">
     
      <div class="list simple-list">
        <ul>
          {{#each shows}}
            <li>{{name}} from {{description}}</li>
          {{/each}}
        </ul>
      </div>
    </div>
  </div>
</template>
<!-- component styles -->
<style>
  .red-link {
    color: red;
  }
</style>
<!-- rest of component data and methods -->

<script>
  // script must return component object
  return {
    data: function () {
     // console.log(shows+"test");
      return {
        title: 'Show Catalog',
        shows:null,
      }
    },
    on: {
      pageInit: function () {
        var self = this;
        var app = self.$app;
 app.request.get('shows.json', (shows) => {
          // update component state with new state
          self.$setState({
            shows: shows,
          });
        });

      }
    }
  }
</script>

here is the output:

tyjutyu
tyjutyu425×624 29.1 KB

#5

Maybe the response doesn’t add the correct content type header, and the response isn’t correctly interpreted as JSON? You could try to add expected response type as fourth argument, and add console.log to check your response data:

app.request.get(‘shows.json’, (shows) => {
console.log(shows);
self.$setState({ shows: shows, });
}, (xhr, status) => {}, ‘json’);

Reference: https://framework7.io/docs/request.html#get

1 Like
#6

It’s almost there! it solved one of my problems which is the never-ending list.
The first attempt was… it displayed one list and then, I tried to edit the shows.json
and added “show2” array to see the output and it displayed 2 lists.

im going to delete the "shows2’ array in shows.json. and now
i dont know how to display data. im still figuring out.

this is the shows.json for easier understanding
{
“shows”:[
{
“id”:“1”,
“id_area”:“1”,
“id_cat”:“1”,
“name”:“The Journey : Road to the Crown”,
“description”:“The show revolves around the candidate and his journey to the most coveted crown.”
},
]
}

Thank you Tim for the help. :slight_smile:

here are the changes so far:

tyjutyu
tyjutyu818×1035 159 KB

#7

Looking at your JSON structure, the array is wrapped in an object, so I think you should add that “level” as well in your $setState call:

self.$setState({
shows: shows.shows
});

#8

oh my god!!! It finally worked!
ive been googling, reading some solution here and on stackoverflow,
doing trials and error for 3 days. i almost gave up!

I can cry now T_T Thank you so much Tim!
I appreciate it!

tyjutyu
tyjutyu467×618 49.5 KB

1 Like
#9

Great, you’re welcome! :grin: Sometimes if I’m strugling with something too long, I just ask my collegue and most of the time it’s solved within two seconds. :see_no_evil: It so easy to overlook something obvious in your own code…

1 Like
#10

is this still applicable in the latest f7 version?