title: Pass request rest-api data to flask html
body: <p>I just started play-around with flask and html. </p>
  
  <p>I have a python file that make a request to a url and return the output in  json. The output is printed on the terminal. Now, I want to get the output to be shown in html page. I have gone with few tutorial..but difficult to understand and to adopt it based on my own data. </p>
  
  <p>Python file without any flask/html </p>
  
  <pre><code>def topo():
      response = requests.get(network_url, auth = (user, pass))
      print(response)
      for nodes in response.json()['network-topology']['topology']:
          node_info = nodes['node']
          for node in node_info:
              try:
                  ip_address = node['host-tracker-service:addresses'][0]['ip']
                  mac_address = node['host-tracker-service:addresses'][0]['mac']
                  print 'MAC address %s IP address %s' % (mac_address, ip_address)
              except:
                  pass
  
  </code></pre>
  
  <p>and the code above return Terminal output as below</p>
  
  <pre><code>MAC address 00:00:00:00:00:01 IP address 10.0.0.1
  MAC address 00:00:00:00:00:02 IP address 10.0.0.2
  </code></pre>
  
  <p>Below is the response from the rest-api request </p>
  
  <pre><code>{u'network-topology': {u'topology': [{u'node': [{u'opendaylight-topology-inventory:inventory-node-ref': u"/opendaylight-inventory:nodes/opendaylight-inventory:node[opendaylight-inventory:id='openflow:1']", u'node-id': u'openflow:1', u'termination-point': [{u'opendaylight-topology-inventory:inventory-node-connector-ref': u"/opendaylight-inventory:nodes/opendaylight-inventory:node[opendaylight-inventory:id='openflow:1']/opendaylight-inventory:node-connector[opendaylight-inventory:id='openflow:1:2']", u'tp-id': u'openflow:1:2'}, {u'opendaylight-topology-inventory:inventory-node-connector-ref': u"/opendaylight-inventory:nodes/opendaylight-inventory:node[opendaylight-inventory:id='openflow:1']/opendaylight-inventory:node-connector[opendaylight-inventory:id='openflow:1:1']", u'tp-id': u'openflow:1:1'}, {u'opendaylight-topology-inventory:inventory-node-connector-ref': u"/opendaylight-inventory:nodes/opendaylight-inventory:node[opendaylight-inventory:id='openflow:1']/opendaylight-inventory:node-connector[opendaylight-inventory:id='openflow:1:LOCAL']", u'tp-id': u'openflow:1:LOCAL'}]}, {u'host-tracker-service:addresses': [{u'first-seen': 1568245219561, u'ip': u'10.0.0.1', u'mac': u'00:00:00:00:00:01', u'id': 26, u'last-seen': 1568245219561}], u'host-tracker-service:id': u'00:00:00:00:00:01', u'host-tracker-service:attachment-points': [{u'active': True, u'corresponding-tp': u'host:00:00:00:00:00:01', u'tp-id': u'openflow:1:1'}], u'node-id': u'host:00:00:00:00:00:01', u'termination-point': [{u'tp-id': u'host:00:00:00:00:00:01'}]}, {u'opendaylight-topology-inventory:inventory-node-ref': u"/opendaylight-inventory:nodes/opendaylight-inventory:node[opendaylight-inventory:id='openflow:2']", u'node-id': u'openflow:2', u'termination-point': [{u'opendaylight-topology-inventory:inventory-node-connector-ref': u"/opendaylight-inventory:nodes/opendaylight-inventory:node[opendaylight-inventory:id='openflow:2']/opendaylight-inventory:node-connector[opendaylight-inventory:id='openflow:2:LOCAL']", u'tp-id': u'openflow:2:LOCAL'}, {u'opendaylight-topology-inventory:inventory-node-connector-ref': u"/opendaylight-inventory:nodes/opendaylight-inventory:node[opendaylight-inventory:id='openflow:2']/opendaylight-inventory:node-connector[opendaylight-inventory:id='openflow:2:1']", u'tp-id': u'openflow:2:1'}, {u'opendaylight-topology-inventory:inventory-node-connector-ref': u"/opendaylight-inventory:nodes/opendaylight-inventory:node[opendaylight-inventory:id='openflow:2']/opendaylight-inventory:node-connector[opendaylight-inventory:id='openflow:2:2']", u'tp-id': u'openflow:2:2'}]}, {u'host-tracker-service:addresses': [{u'first-seen': 1568245219558, u'ip': u'10.0.0.2', u'mac': u'00:00:00:00:00:02', u'id': 25, u'last-seen': 1568245219558}], u'host-tracker-service:id': u'00:00:00:00:00:02', u'host-tracker-service:attachment-points': [{u'active': True, u'corresponding-tp': u'host:00:00:00:00:00:02', u'tp-id': u'openflow:2:1'}], u'node-id': u'host:00:00:00:00:00:02', u'termination-point': [{u'tp-id': u'host:00:00:00:00:00:02'}]}], u'link': [{u'link-id': u'host:00:00:00:00:00:01/openflow:1:1', u'destination': {u'dest-node': u'openflow:1', u'dest-tp': u'openflow:1:1'}, u'source': {u'source-tp': u'host:00:00:00:00:00:01', u'source-node': u'host:00:00:00:00:00:01'}}, {u'link-id': u'openflow:2:1/host:00:00:00:00:00:02', u'destination': {u'dest-node': u'host:00:00:00:00:00:02', u'dest-tp': u'host:00:00:00:00:00:02'}, u'source': {u'source-tp': u'openflow:2:1', u'source-node': u'openflow:2'}}, {u'link-id': u'openflow:1:2', u'destination': {u'dest-node': u'openflow:2', u'dest-tp': u'openflow:2:2'}, u'source': {u'source-tp': u'openflow:1:2', u'source-node': u'openflow:1'}}, {u'link-id': u'openflow:2:2', u'destination': {u'dest-node': u'openflow:1', u'dest-tp': u'openflow:1:2'}, u'source': {u'source-tp': u'openflow:2:2', u'source-node': u'openflow:2'}}, {u'link-id': u'openflow:1:1/host:00:00:00:00:00:01', u'destination': {u'dest-node': u'host:00:00:00:00:00:01', u'dest-tp': u'host:00:00:00:00:00:01'}, u'source': {u'source-tp': u'openflow:1:1', u'source-node': u'openflow:1'}}, {u'link-id': u'host:00:00:00:00:00:02/openflow:2:1', u'destination': {u'dest-node': u'openflow:2', u'dest-tp': u'openflow:2:1'}, u'source': {u'source-tp': u'host:00:00:00:00:00:02', u'source-node': u'host:00:00:00:00:00:02'}}], u'topology-id': u'flow:1'}]}}
  
  </code></pre>
  
  <p>This is when I add route with flask and html page. Maybe I'm wrong here. Pls assist here.</p>
  
  <pre><code>@app.route('/')
  def mypage():
     def topo():
      response = requests.get(network_url, auth = (user, pass))
      print(response)
      for nodes in response.json()['network-topology']['topology']:
            &lt;snippet&gt;
  
  
          return render_template('myweb.html', topo=json.loads(response.text)['network-topology'])
  
  if __name__ == '__main__':
    app.run(host='0.0.0.0', debug=True)
  </code></pre>
  
  <p>In the html template, i don't know exactly how to do it...how to link html page to my python file. Pls assist here...</p>
  
  <pre><code>&lt;!-- myweb.html --&gt;
  
  &lt;html&gt;
  &lt;body&gt;
    &lt;h1&gt;Topology&lt;/h1&gt;
    {% ??????????? %}
      &lt;div&gt;{{?????["????????"]}}&lt;/div&gt;
    {% ???? %}
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I would like to see the HTML output in simple table like below</p>
  
  <pre><code>   MAC Address       IP Address
  1. 00:00:00:00:00:01 10.0.0.1
  2. 00:00:00:00:00:02 10.0.0.2 
  </code></pre>
  
  <p>I  want to have the output onto html page. Just not clear how to do it with my own json data. Please show me the correct way of doing it. Thank you for your support and help.</p>