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

【问题标题】：Access every Flask array elements and Display to html with JavaScript使用 JavaScript 访问每个 Flask 数组元素并显示为 html
【发布时间】：2017-07-05 03:05:42
【问题描述】：

我是python和flask的初学者，所以我想问一下如何访问flask数组，增加它的数组索引并使用JavaScript在html中显示它。我设法只访问了它的一个数组并显示它，但我未能增加它的索引来访问它的每个元素。以下是我的部分代码：

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

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

请指导我。谢谢。

【问题讨论】：

  • 请阅读代码，您可以看到我声明为数组的内容，其中的数组是使用 NumPy 从用户输入中获取的值

标签： javascript python arrays flask


【解决方案1】：

仔细查看您编写的这段 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]) }}'
  }

你看到这里的问题了吗？您可能认为您正在增加您的 i，但是有两个 i 并且它们有很大的不同。 tps[i] 中的 i 由服务器上的 jinja 评估。 javascript for 循环中的i 会在客户端上的浏览器中进行评估。 Jinja 将在 i 处评估 tps，并在 javascript 代码中对其进行硬编码。

如果您想将 python 数组发送到您的 javascript，这里有两种方法。您可以像这样一次编写整个数组：

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

然后用javascript迭代数组。

或者，您可以编写一个返回列表的路由，并在页面加载时对该路由进行 ajax 以获取数组。这样，如果数组很大，您的页面将不会永远加载。

【讨论】：

  • 谢谢，JSON.parse 真的很有帮助！
  • 很高兴我能帮上忙。如果您确实在客户端解析 json，请确保将您的 tps 数组转换为控制器中的 json 字符串以及 render_template (..., tps=json.dumps(tps), ...)。
  • 你知道如何将一个 wtform 中的变量传递给另一个 wtform？
  • 我不确定，抱歉。
猜你喜欢
  • 1970-01-01
  • 2016-11-14
  • 2021-11-12
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-02-19
  • 2018-09-26
  • 2022-07-26
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode