How to display json data in my f7 template

Questions
1

hi. all
i’m new for framework 7
I want to fetch data from a database using web service and displaying it on a page in my f7 v2 application :
this the json data : {“empno”:7369,“ename”:“SMITH”,“job”:“CLERK”,“mgr”:7902,“hiredate”:“1980-12-17T05:00:00Z”,“sal”:800,“comm”:null,“deptno”:20}

i can fetch it in app.js :

app.request({
                                url: 'https://emp/empname/7369',
                                dataType: 'json',
                                method: 'GET',
                                cache: true,
                                tryCount : 0,//starting request,,,
                                retryLimit : 3,//no of retries...
                                timeout: 1000,//must set so it doesnt request forever, between trials...
                               // data: {
                                 //  data : anything,
                                //},
                                crossDomain: true,
                                success: function (data) {
                                          console.log(data);
										  console.log(data);
								  
										
                                    },
                                    error : function(xhr, textStatus, errorThrown ) {

                                            if (textStatus == 'timeout') {
                                                this.tryCount++;
                                                if (this.tryCount <= this.retryLimit) {
                                                    //try again
                                                   app.request(this);
                                                     //check if it retried by checking the response...
                                                    console.log(this.tryCount);
                                                   console.log('error');
                                                    return;
                                                }            
                                                return;
                                            }
                                  }
                              });



 but i don't know how to display this data in a template like this : 


<template>       
		   <div data-page="form" class="page cached">
		   <div class="navbar">
    <div class="navbar-inner sliding">
      <div class="left">
        <a href="#" class="link back">
          <i class="icon icon-back"></i>
          <span class="ios-only">Back</span>
        </a>
      </div>
      <div class="title">form-page</div>
    </div>
  </div>
            <div class="page-content">
              <div class="content-block">
           
              </div>
              

              <div class="content-block-title"></div>
          <div class="list inline-labels no-hairlines-md">
  <ul>
    <li class="item-content item-input">
      <div class="item-media">
        <i class="icon demo-list-icon"></i>
      </div>
      <div class="item-inner" id="empno">
        <div class="item-title item-label">empno</div>
        <div class="item-input-wrap">
		 
          < type="text" placeholder="Your name">
          <span class="input-clear-button"></span>
        </div>
      </div>
    </li>
    <li class="item-content item-input">
      <div class="item-media">
        <i class="icon demo-list-icon"></i>
      </div>
      <div class="item-inner" id="ename">
        <div class="item-title item-label">ename</div>
        <div class="item-input-wrap">
          <input type="text" placeholder="ename">
          <span class="input-clear-button"></span>
        </div>
      </div>
    </li>
</template>
   --------

can anyone help me and thanks
2

Check documentation for Router Component http://framework7.io/docs/router-component.html

2 Likes