Json to Template7 - F7 V2

Hello guys,

I really, really,really :fearful: need some help with my school project, I’m using framework 7 version 2, so far so good, am able to post data with ajax smoothly. The big problem am facing is fetching my data from database and display it on my html page using template7.

here is how am trying to fetch data from database on router.js

   {
        path: '/universities/',
        async: function (routeTo, routeFrom, resolve, reject) {

            var router = this;

            // App instance
            var app = router.app;
            app.request({
                url: 'http://localhost/assaa-backend/fetch.php',
                dataType: 'json',
                method: "GET",
                crossDomain: true,
                success: function (response) {
                    $$('.articles').html(response),
                        console.log(response),
                        resolve(

                            {
                                componentUrl: './pages/universities.html',
                            },

                            {
                                context: {
                                    list: response,

                                },
                            }

                        );
                }
            });

        }
    },

I use console.log(response) and I can see the data perfectly. But I don’t have a clue how to pass those data to template7.

Here is my json output:

{"list":[{"id":"1","uni_name":"Galgotias University","uni_country":"India","uni_city":"New Delhi","uni_budget":"2000 USD","uni_courses":"Technology, Pharmacy, Mechanical Engineering, Civil","uni_intakes":"January, March"},{"id":"2","uni_name":"Amity University","uni_country":"India","uni_city":"New Delhi","uni_budget":"1500 USD","uni_courses":"Technology, Chemical Engineering, Medical, Pharmacy","uni_intakes":"January, August"},{"id":"3","uni_name":"Centurion University","uni_country":"India","uni_city":"Odisha","uni_budget":"1500 USD","uni_courses":"Engineering & Technology, Applied Sciences, Agriculture, Management, Humanities and Social Sciences","uni_intakes":"January"}]}

Please if anyone solved something like this please share the code or ideas.

Thank you

var self = this;
self.$setState({
    data: response
}, () => {
    console.log('saved');
});

В data содержится ваш json

Потом можно его использовать

{{$root.data.list[0].id}} - как-то так…

Thank you for your reply, but I dont seem to understand

Sorry, can you guide me where to put this? Also as I stated I don’t know (completely) how I can pass it to template7

Я сложной логике я бы посоветовал Вам вынести загрузку в отдельный файл шаблона
Например: в routes оставить только:
{
path: ‘/universities/’,
componentUrl: ‘./pages/universities.html’,
}

В universities.html

<template>


<div class="page" data-name="universities">

  <div class="list-block">
      <ul>
        {{#each list}}
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">{{uni_name}}</div>
            <div class="item-title">{{uni_country}}</div>
            ...
          </div>
        </li>
        {{/each}}
      </ul>
    </div>
    
</div>
</template>
<script>
return {
    data: function() {
        return {
           list: null
        }
    },
    mounted: function() {
        var self = this;
       
     app.request.json('http://localhost/assaa-backend/fetch.php', function (data) {
        
         self.$setState({
                   list: data,
                });
         
        });
        
    }
};

</script>

Hello @Denis, Thank you for your help. I tried your solution but it doesnt seem to work am not sure if I am missing something but data is not returned even if I console.log(data). Please guide me

here is my universities.html now

<template>
    <div class="page" data-name="universities">
        <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">Universities</div>

                <div class="right">
                    <a href="#" class="link popover-open" data-popover=".popover-menu">
                        <i class="material-icons">more_vert</i>
                    </a>
                </div>
            </div>
        </div>

        <div class="page-content">
            <div class="block">

                <div class="list-block">
                    <ul>
                        {{#each list}}
                            <li class="item-content">
                                <div class="item-inner">
                                    <div class="item-title">{{uni_name}}</div>
                                    <div class="item-title">{{uni_country}}</div>
                                </div>
                            </li>
                        {{/each}}
                    </ul>
                </div>

            </div>
        </div>

        <!--Popover-->
        <div class="popover popover-menu">
            <div class="popover-angle"></div>
            <div class="popover-inner">
                <div class="list">
                    <ul>
                        <li><a href="/panel/" class="list-button item-link popover-close" @click="openAbout">About</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!--Popover End-->

    </div>
</template>




<script>
    return {
        data: function() {
            return {
                list: null
            }
        },
        mounted: function() {
            var self = this;

            app.request.json('http://localhost/assaa-backend/fetch.php', function(data) {

                self.$setState({
                    list: data,
                });

            });

        }
    }

</script>

Did you check the browser console? Is the request successful? Does it contain correct and required data in response?