如何将循环输出(列表)传递到html页面

时间:2019-10-10 02:43:07

标签: python json flask

在SO专家的帮助下,我能够将单个for循环数据(列表)传递到html页面。现在我有2个for循环(节点列表和链接列表),每个循环都有自己的列表。然后将节点和链接合并到一个列表中。因此,我该如何发送内容节点并将数据链接到html页面的列表...请告知。

这是代码

## 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
           <some code here>
        return nodes

        links = []
        for link in topology['link']: #2nd loop to get list of links
           <some code here>
        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)

HTML页面

<html>
<body>
    <h1>Topology</h1>
    <table id="yourTableID" width="100%" cellspacing="5">
        <thead>
            <tr>
                <th> Nodes </th>
                <th> Links </th>  
            </tr>
        </thead>
        <tbody>
            {% for i in mytopo %}
                <tr>
                   <td>
                      {{ i["id"] }}
                   </td>
                   <td>
                     {{ i["source"] }}
                   </td>
                   <td>
                     {{ i["target"] }}
                   </td>
                </tr>
            {% endfor %}
        </tbody>                 
    </table>
</body>
</html>

节点和链接的jsonfile内容列表

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

我正在寻找页面上会显示类似这样的内容


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

1 个答案:

答案 0 :(得分:0)

您的问题在您的for循环中。您正在尝试从此处的列表中拉出类似的项目

toString()

如果您的json对象看起来像这样,您可以使用此

{% for i in mytopo %}
    <tr>
     <td>{{ i["id"] }}</td>
     <td>{{ i["source"] }}</td>
     <td>{{ i["target"] }}</td>
    </tr>
{% endfor %}