堆栈内存溢出
  简体   繁体   English

访问每个Flask数组元素并使用JavaScript显示为html

[英]Access every Flask array elements and Display to html with JavaScript

 原文  2017-07-05 03:05:42  6   1    javascript/ python/ arrays/ flask

问题描述

I'm a beginner in python and flask, so i want to ask on how can i access the flask array, increments its array index and display it in html by using JavaScript. 我是python和flask的初学者，所以我想问一下如何访问flask数组，增加其数组索引并通过使用JavaScript以html显示。 I managed to access only one of its array and display it but i failed in incrementing its index to access each of its element. 我设法仅访问其数组之一并显示它，但是我未能增加其索引来访问其每个元素。 Below is part of my code : 以下是我的代码的一部分：

Python/Flask 蟒蛇/瓶 

@app.route('/Table',methods=['GET', 'POST'])
def showtable():
incr1=0
incr2=0

form = InputForm2(request.form)
session['stemp'] = form.istemp.data
stemp = session['stemp']
session['etemp'] = form.ietemp.data
etemp = session['etemp']
session['stp1'] = form.istp1.data
stp1 = session['stp1']

session['spress'] = form.ispress.data
spress = session['spress']
session['epress'] = form.iepress.data
epress = session['epress']
session['stp2'] = form.istp2.data
stp2 = session['stp2']

incr1 = (etemp - stemp) / stp1
incr2 = (epress - spress) / stp2

tps = np.arange(stemp,etemp,incr1)


for i in range(0,len(tps)):
    tps[i] = tps[i].tolist()

i=0

return render_template('table.html',stemp=stemp,etemp=etemp,incr1=incr1,stp1=stp1,spress=spress,epress=epress,incr2=incr2,
                       tps=tps,i=i)

HTML/JavaScript HTML / JavaScript的 

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="https://media.licdn.com/mpr/mpr/shrink_200_200/AAEAAQAAAAAAAAfJAAAAJDIxMDc1NWExLTczODgtNDBhOS1iZmYwLWRmOTZjZjc2NzVhYQ.png"> <link rel="stylesheet" type="text/css" href="http://docs.handsontable.com/pro/bower_components/handsontable-pro/dist/handsontable.full.min.css"> <!--<link rel="stylesheet" type="text/css" href="http://handsontable.com/static/css/main.css">--> <script src="http://docs.handsontable.com/pro/bower_components/handsontable-pro/dist/handsontable.full.min.js"></script> <title>Invigour Tool</title> <!-- Bootstrap core CSS --> <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- Custom styles for this template --> <!--<link href="dashboard.css" rel="stylesheet" type="text/css">--> <style> /* Move down content because we have a fixed navbar that is 50px tall */ body { padding-top: 50px; } /* * Global add-ons */ .sub-header { padding-bottom: 10px; border-bottom: 1px solid #eee; } /* * Top navigation * Hide default border to remove 1px line. */ .navbar-fixed-top { border: 0; } /* * Sidebar */ /* Hide for mobile, show later */ .sidebar { display: none; } @media (min-width: 768px) { .sidebar { position: fixed; top: 51px; bottom: 0; left: 0; z-index: 1000; display: block; padding: 20px; overflow-x: hidden; overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ background-color: #f5f5f5; border-right: 1px solid #eee; } } /* Sidebar navigation */ .nav-sidebar { margin-right: -21px; /* 20px padding + 1px border */ margin-bottom: 20px; margin-left: -20px; } .nav-sidebar > li > a { padding-right: 20px; padding-left: 20px; } .nav-sidebar > .active > a, .nav-sidebar > .active > a:hover, .nav-sidebar > .active > a:focus { color: #fff; background-color: #428bca; } /* * Main content */ .main { padding: 20px; } @media (min-width: 768px) { .main { padding-right: 40px; padding-left: 40px; } } .main .page-header { margin-top: 0; } /* * Placeholder dashboard ideas */ .placeholders { margin-bottom: 30px; text-align: center; } .placeholders h4 { margin-bottom: 0; } .placeholder { margin-bottom: 20px; } .placeholder img { display: inline-block; border-radius: 50%; } /* Custom page footer */ .footer { padding-top: 10px; margin-top: 2cm; color: #777; border-top: 1px solid #e5e5e5; } .out{ float: right; box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); width: 180px; height: 85px; font-size: 30px; border-radius: 24px; background-color: limegreen; position: relative; right: 0.5cm; margin-top: 3cm; } .rest{ float: right; box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); width: 180px; height: 85px; font-size: 30px; border-radius: 24px; background-color: limegreen; margin-top: 6cm; position: relative; left: 4.3cm; } input[type="number"]{ margin-left: 3.7cm; } select[id=cor4]{ width: 165px; } select{ margin-left: 1cm; } tr:hover{ background-color:#f5f5f5} </style> </head> <body> <div> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="http://www.invigourenergy.com/">Invigour Energy</a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="Menu">Dashboard</a></li> <li><a href="PVT Menu">PVT Tool</a></li> <li><a href="#">Help</a></li> </ul> <form class="navbar-form navbar-right"> <input type="text" class="form-control" placeholder="Search..."> </form> </div> </div> </nav> <div class="container-fluid"> <div class="row"> <div class="col-sm-3 col-md-2 sidebar"> <ul class="nav nav-sidebar"> <li class="active"><a href="#">Overview <span class="sr-only">(current)</span></a></li> <li><a href="#"> </a></li> <li><a href="#"> </a></li> </ul> <ul class="nav nav-sidebar"> <li><a href=""> </a></li> <li><a href=""> </a></li> <li><a href=""> </a></li> <li><a href=""> </a></li> <li><a href=""> </a></li> </ul> </div> <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"> <form method="POST" class="form" id="fm3"> <h3>Output Data for Basic Input</h3> <div id="example1" class="hot handsontable"></div> <script> //alert('{{ (tps[i]) }}'); //var xyz = '{{ (tps[0]) }}'; //var xxx = parseFloat('{{ (stemp) }}'); var yyy = parseFloat('{{ (stp1) }}'); //var zzz = parseFloat('{{ (incr1) }}'); var i = '{{ (i) }}'; var data = [ ], container = document.getElementById('example1'), hot1; for( i ; i < yyy; i++) { //alert(i); //alert('{{ (tps[i]) }}'); var t = '{{ (tps[i]) }}'; data.push( {temp:t, press:999 } ); //xyz = '{{ (tps[0 + 1]) }}'; for(t;t<yyy;t++) t = '{{ (tps[i+1]) }}' } function isEmptyRow(instance, row) { var rowData = instance.getData()[row]; for (var i = 0, ilen = rowData.length; i < ilen; i++) { if (rowData[i] !== null) { return false; } } return true; } function defaultValueRenderer(instance, td, row, col, prop, value, cellProperties) { var args = arguments; if (args[5] === null && isEmptyRow(instance, row)) { td.style.color = '#999'; } else { td.style.color = ''; } Handsontable.renderers.TextRenderer.apply(this, args); } hot1 = new Handsontable(container, { //startRows: 5, //startCols: 99999, minSpareRows: 1, contextMenu: true, width: 1000, height: 500, stretchH: 'all', rowHeaders: true, colHeaders: [ 'Temperature (◦F)', 'Pressure (psia)', 'Bubble Point (psia)', 'Gas Oil Ratio (scf/STB)', 'Oil Density (lb/ft'+'3'.sup()+')', 'Oil Viscosity (cP)', 'Oil FVF (RB/STB)', 'Oil Compressibility (1/psi)', 'Gas Density (lb/ft'+'3'.sup()+')', 'Gas Viscosity (cP)', 'Gas FVF (ft'+'3'.sup()+'/scf)', 'Z Factor', 'Water Density (lb/ft'+'3'.sup()+')', 'Water Viscosity (cP)', 'Water FVF (RB/STB)', 'Water Compressibility (1/psi)', 'Oil/Gas IFT (dyne/cm)', 'Oil/Water IFT (dyne/cm)', ], columns: [ { data: 'temp', type: 'numeric', format: '0.00' //width: 20 }, { data: 'press', type: 'numeric', format: '0.00' }, { data: 'pb', type: 'numeric', format: '0.00' //width: 20 }, { data: 'gor', type: 'numeric', format: '0.00' //width: 20 }, { data: 'po', type: 'numeric', format: '0.00' //width: 20 }, { data: 'uo', type: 'numeric', format: '0.00' //width: 20 }, { data: 'bo', type: 'numeric', format: '0.00' //width: 20 }, { data: 'co', type: 'text' //width: 20 }, { data: 'pg', type: 'numeric', format: '0.00' //width: 20 }, { data: 'ug', type: 'numeric', format: '0.00' //width: 20 }, { data: 'bg', type: 'numeric', format: '0.00' //width: 20 }, { data: 'zf', type: 'numeric', format: '0.00' //width: 20 }, { data: 'pw', type: 'numeric', format: '0.00' //width: 20 }, { data: 'uw', type: 'numeric', format: '0.00' //width: 20 }, { data: 'bw', type: 'numeric', format: '0.00' //width: 20 }, { data: 'cw', type: 'text' //width: 20 }, { data: 'iog', type: 'numeric', format: '0.00' //width: 20 }, { data: 'iow', type: 'numeric', format: '0.00' //width: 20 }, ], }); hot1.loadData(data); function aa() { } </script> <br/> <footer class="footer"> <p>Copyright © Invigour Energy 2016</p> </footer> </form> </div> </div> </div> </div> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\\/script>')</script> <script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script> <!-- Just to make our placeholder images work. Don't actually copy the next line! --> <script src="http://getbootstrap.com/assets/js/vendor/holder.min.js"></script> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <script src="http://getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"></script> </body> </html>

Please guide me.Thanks. 请指导我。谢谢。

1 个解决方案

解决方案1
 0 已采纳  2017-07-05 08:46:07

Have a closer look at this javascript code you wrote: 仔细看看您编写的以下JavaScript代码： 

for( i ; i < yyy; i++) {
    //alert(i);
    //alert('{{ (tps[i]) }}'):
    var t = '{{ (tps[i]) }}';
    data.push(
          {temp:t, press:999 } );
     //xyz = '{{ (tps[0 + 1]) }}';
     for(t;t<yyy;t++)
           t = '{{ (tps[i+1]) }}'
  }

Do you see the problem here? 您在这里看到问题了吗？ You're probably thinking youre incrementing your i , but there are two i s and they are quite bit different. 您可能在想您要增加i ，但是有两个i ，它们有些不同。 The i in tps[i] gets evaluted by jinja on the server. 在i的tps[i]得到服务器上神社evaluted。 The i in the javascript for loop gets evaluated the browser on the client. javascript for循环中的i被评估为客户端上的浏览器。 Jinja will evaluate tps at i and hard codes that in the javascript code. Jinja会评估i的tps和javascript代码中的硬代码。

If you want to send a python array to your javascript, here are two ways. 如果您想将python数组发送到您的javascript，请使用以下两种方法。 You can write the whole array at once like this: 您可以像这样一次写入整个数组： 

var tps_array = JSON.parse('{{ tps | safe }}');

and then iterate the array with javascript. 然后使用javascript迭代数组。

Alternatively, you can write a route that returns your list, and ajax that route on your page load to get the array. 另外，您可以编写返回列表的路由，并在页面加载时使用该路由的ajax来获取数组。 That way if the array is huge, your page will not take forever to load. 这样，如果数组很大，您的页面就不会花太多时间加载。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Flask Javascript Array 显示在 html 中？ - Flask Javascript Array display in html? Javascript-显示数组元素 - Javascript - Display array elements 显示数组元素JavaScript - Display array elements JavaScript 在javascript中显示数组的元素 - Display elements of an array in javascript angularjs + 如何访问 api 响应数组中的元素以在 html 中显示为消息 - angularjs + how to access elements in api response array to display as message in html 在 Javascript 中访问数组元素 - Access array elements in Javascript 合并数组 javascript 中的每 3 个元素 - Merge every 3 elements in array javascript 如何从JavaScript数组访问元素以获取使用PHP / HTML发送的电子邮件 - How to access elements from a javascript array for an email sent with PHP/HTML 访问HTML中的javascript数组 - Access javascript Array in HTML 实际HTML元素的JAVASCRIPT数组 - JAVASCRIPT array of actual HTML elements
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM