Pass request rest-api data to flask html

Question

I just started play-around with flask and html.

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.

Python file without any flask/html

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

and the code above return Terminal output as below

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

Below is the response from the rest-api request

{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'}]}}

This is when I add route with flask and html page. Maybe I'm wrong here. Pls assist here.

@app.route('/')
def mypage():
   def topo():
    response = requests.get(network_url, auth = (user, pass))
    print(response)
    for nodes in response.json()['network-topology']['topology']:
          <snippet>


        return render_template('myweb.html', topo=json.loads(response.text)['network-topology'])

if __name__ == '__main__':
  app.run(host='0.0.0.0', debug=True)

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...

<!-- myweb.html -->

<html>
<body>
  <h1>Topology</h1>
  {% ??????????? %}
    <div>{{?????["????????"]}}</div>
  {% ???? %}
</body>
</html>

I would like to see the HTML output in simple table like below

   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 

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.

Answer 1

Here is a possible approach:

PYTHON'S SIDE:

@app.route('/')
def mypage():
    def topo():
        response = requests.get(network_url, auth = (user, pass))
        print(response)
        list_of_mac_ip_address = []

        for nodes in response.json()['network-topology']['topology']:
            node_info = nodes['node']
            for node in node_info:
                dico = dict()
                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)

                    dico['IP'] = ip_address
                    dico['MAC'] = mac_address
                    list_of_mac_ip_address.append(dico)

                except:
                    pass

        return list_of_mac_ip_address

    list_of_mac_ip_address = topo()

    return render_template('myweb.html', list_ip_mac=list_of_mac_ip_address)

if __name__ == '__main__':
    app.run(host='0.0.0.0', debug=True)

myweb.html:

<html>
<body>
    <h1>Topology</h1>
    <table id="yourTableID" width="100%" cellspacing="5">
        <thead>
            <tr>
                <th> MAC Address </th>
                <th> IP Address </th>   
            </tr>
        </thead>
        <tbody>
            {% for i in list_ip_mac %}
                <tr>
                    <td>
                        {{ i["IP"] }}
                    </td>
                    <td>
                        {{ i["MAC"] }}
                    </td>
                </tr>
            {% endfor %}
        </tbody>                 
    </table>
</body>
</html>

As you can see I create a list of dictionaries that I send on the HTML side. And with jinja I iterate through this list to retrieve the different IP and MAC addresses.