在JavaScript中以数组形式访问Python列表

Question

我在我的flask项目的views.py文件里写了这些代码：

    def showpage():
      ...
      test = [1,2,3,4,5,6]
      return render_template("sample.html",test=test)

我在我的示例.html文件里写了这些内容：

    <script> var counts = {{test}}; </script>

这样做让我得到了一个空的counts变量。我该怎么做才能让counts的值和Python里的测试列表一样呢？

Answer 1

你尝试从你的 Python showpage 函数中返回一个字典，像下面这样做，就能成功：

def showpage():
    """Your logic for getting the list to return """
    test_dict = {"data_list": [1,2,3,4,5]}
    return render_template("sample.html", test=test_dict)

Answer 2

我一直不喜欢使用 json.dumps 这个东西。在这个解决方案中，数组并不是特别的情况。你只需要把你的数组和其他变量放进一个对象里就可以了：

Python

@app.route('/somePath')
def example():
    data = {
        'robotNames': ['Wall-E', 'Bender', 'Rosie']
    }
    return render_template('index.html', data=data)

JavaScript

<script>
    var flaskData = JSON.parse('{{data | tojson | safe}}');

    var robots = flaskData.robotNames;
    robots.forEach(function (robot) {
        console.log(robot);
    });
</script>

Answer 3

你在Flask的视图中使用了 json.dumps，而在JavaScript代码中使用了 JSON.parse。

在Python视图中：

def showpage():
    ...
    test = [1,2,3,4,5,6]
    test = json.dumps(test)
    return render_template("sample.html",test=test)

在JavaScript代码中：

<script> var counts = JSON.parse("{{ test }}"); </script>

Answer 4

你还可以使用

{{ test|safe }} 

或者

{{ test|tojson|safe }}

safe这个过滤器是用在脚本标签里的。

Answer 5

1. 当你在模板中插入变量，比如{{ test }}，它会以对象的形式显示出来。比如说，如果你有一个整数列表[1,2,3,4,5,6]，它会显示为[1, 2, 3, 4, 5, 6]，这就是一个有效的JavaScript数组。但是，如果你有更复杂的对象，比如[1,2,3,4,5,any]，它会显示成[1, 2, 3, 4, 5, <内置函数 any>]，不过这只是个例子，实际上是不会工作的。

2. 在Flask中，有一个叫做tojson的过滤器，可以把对象隐式转换成JavaScript对象：

   <script> var counts = {{ test|tojson }}; </script>
   

   所以，如果这个对象可以被转换成JSON格式，那么它就会被正常显示；如果不能，模板引擎就会报错。

3. 你也可以把JavaScript代码发送到你的模板中：

   from flask import json
   return render_template("sample.html",test=json.dumps(test))
   

   但这样做并不是一个好方法，最好还是使用tojson过滤器，因为它也能保证HTML的安全性。

4. 我更倾向于不在模板中混合任何JavaScript代码，而是把模板、JavaScript和通过Ajax获取的数据分开。如果这种方法太复杂，我会更愿意使用tojson过滤器。