title: How to pass for loop output (list) to html page
body: <p>following to help from SO expert I'm able to pass single for loop data (a list) to html page. Now I have 2 for loop (list of nodes and list of links) and each loop got its own list. Then consolidate nodes and links onto a single list. Thus, how can I send the list which content nodes and links data to html page...please advise.</p>
  
  <p>This is the code</p>
  
  <pre><code>## 2 for loop to extract list of nodes and links
  @app.route('/')  
  def mypage():
     def topo():
          resData = json.load(open('odl_topo.txt'))
          topology = resData['network-topology']['topology'][0]
  
          nodes = []
          for node in topology['node']: #1st loop to get list of nodes
             &lt;some code here&gt;
          return nodes
  
          links = []
          for link in topology['link']: #2nd loop to get list of links
             &lt;some code here&gt;
          return links
  
          nodeslinks_topo = {'nodes': nodes, 'links': links}
          final_topo = json.dumps(nodeslinks_topo)
     final_topo = topo()
     #nodes = topo()
     #links = topo()
  
     ## Able to send to html page either nodes or links but not both nodes and 
     ## links data
  
     ##this work only if send to html list of nodes data
     #return render_template('myweb.html', mytopo=nodes)
  
     ##this work only if send to html list of links data
     #return render_template('myweb.html', mytopo=links)
  
     ##I want to send list of nodes and links together to html and this doesn't 
     work
     return render_template('myweb.html', mytopo=nodeslinks_topo)
  
  #Flask web server
  if __name__ == "__main__":
     app.run(host='0.0.0.0',debug = True)
  </code></pre>
  
  <p>HTML page</p>
  
  <pre><code>&lt;html&gt;
  &lt;body&gt;
      &lt;h1&gt;Topology&lt;/h1&gt;
      &lt;table id="yourTableID" width="100%" cellspacing="5"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt; Nodes &lt;/th&gt;
                  &lt;th&gt; Links &lt;/th&gt;  
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              {% for i in mytopo %}
                  &lt;tr&gt;
                     &lt;td&gt;
                        {{ i["id"] }}
                     &lt;/td&gt;
                     &lt;td&gt;
                       {{ i["source"] }}
                     &lt;/td&gt;
                     &lt;td&gt;
                       {{ i["target"] }}
                     &lt;/td&gt;
                  &lt;/tr&gt;
              {% endfor %}
          &lt;/tbody&gt;                 
      &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>jsonfile content list of nodes and links</p>
  
  <pre><code>{
    "nodes": [
      {
        "id": "openflow:1",
        "tpid": [
          "openflow:1:2",
          "openflow:1:1",
          "openflow:1:LOCAL"
        ]
      },
      {
        "ip": "10.0.0.1",
        "mac": "00:00:00:00:00:01",
        "id": "host:00:00:00:00:00:01",
        "tpid": [
          "host:00:00:00:00:00:01"
        ]
      },
      {
        "id": "openflow:2",
        "tpid": [
          "openflow:2:LOCAL",
          "openflow:2:1",
          "openflow:2:2"
        ]
      },
      {
        "ip": "10.0.0.2",
        "mac": "00:00:00:00:00:02",
        "id": "host:00:00:00:00:00:02",
        "tpid": [
          "host:00:00:00:00:00:02"
        ]
      }
    ],
    "links": [
      {
        "source": "host:00:00:00:00:00:01",
        "id": "host:00:00:00:00:00:01/openflow:1:1",
        "target": "openflow:1:1"
      },
      {
        "source": "openflow:2:1",
        "id": "openflow:2:1/host:00:00:00:00:00:02",
        "target": "host:00:00:00:00:00:02"
      },
      {
        "source": "openflow:1:2",
        "id": "openflow:1:2",
        "target": "openflow:2:2"
      },
      {
        "source": "openflow:2:2",
        "id": "openflow:2:2",
        "target": "openflow:1:2"
      },
      {
        "source": "openflow:1:1",
        "id": "openflow:1:1/host:00:00:00:00:00:01",
        "target": "host:00:00:00:00:00:01"
      },
      {
        "source": "host:00:00:00:00:00:02",
        "id": "host:00:00:00:00:00:02/openflow:2:1",
        "target": "openflow:2:1"
      }
    ]
  }
  </code></pre>
  
  <p>Im looking the page would present something like this</p>
  
  <pre><code>
  Topology
  
  Nodes          Link
  openflow:1     host:00:00:00:00:00:01 - openflow:1:1
  10.0.0.1       openflow:2:1 - host:00:00:00:00:00:02
  openflow:2     openflow:1:2 - openflow:1:2
  10.0.0.2       openflow:2:2 - openflow:1:2
                 openflow:1:1 - host:00:00:00:00:00:01
                 host:00:00:00:00:00:02 - openflow:2:1
  
  Really appreciate for your help and support on this matter.
  
  Thank you
  </code></pre>