Using templates for custom page

I know basics of frappe. So, need help in customization.

Suppose I have two doctypes A and B. A with some fields like 1,2,3,4… and B with fields I, II, III and on link field with option as doctype A i.e. linked to A.

Now, On form, I want one ‘select’ field that populates all name fields of doctype A. On change of select field want to perform other operations. But for now, I have written simple step to populate all names of doctype A inside paragraphs.

For this, I have created 3 files in side /myapp/templates/pages/ folder as mypage.html, and mypage.js.

mypage.html is like…

{% extends "templates/web.html" %}
{% block title %}My Page{% endblock %}
{% block header %}
<h1>My Page</h1>
{% endblock %}
{% block page_content %}
 <div class="page-content-block">
{% for g in groups%}
	<p class="">
		{{ g }} 
{% endfor %}
<form role="form" data-web-form="grp">
<div class="row">
<div class="form-group">
<label for="status" class="control-label text-muted small">Group Name</label>		
{% include "seva/templates/pages/mypage.js" %}
{% endblock %}   
{% include "seva/templates/pages/mypage.js" %}
{% endblock %} looks like …

from __future__ import unicode_literals
import frappe
import json
from frappe import _

def get_context(context):
group_user = frappe.db.get_value("Group", {"parent":, "user": frappe.session.user} , "user")
if not group_user or frappe.session.user == 'Guest': 
	raise frappe.PermissionError
context.no_cache = True
context.show_sidebar = True
group = frappe.get_doc('Group',
group .has_permission('read')
context.groups = get_groups()

def get_groups():
	groups = frappe.get_all("Groups", fields=["name","date","place"])	
	return groups

and mypage.js is like…

frappe.ready(function() {

When I run localhost:8000/mypage … it shows only block title and block header. It doesn’t run for loop and show any data

What is missing? Also what if I want to open this page from my App page where all doctypes are listed ? … i.e. http://localhost:8000/desk#modules/MyApp