在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变量。我该如何在Python中使counts与测试列表相同？

- knk

---

你能展示一下使用你的模板渲染后的源代码吗？ - tbicr

问题在于它无法渲染。如果我使用下面的解决方案，它会显示JSON.parse处意外的输入结束。 - knk

是空字符串还是<script> var counts = ; </script>或其他什么东西？ - tbicr

Answer 1

1. 当您将变量插入模板{{ test }}中时，它会采用对象表示法。对于整数列表[1,2,3,4,5,6]，它将呈现为[1, 2, 3, 4, 5, 6]，因此它是有效的JavaScript数组，但是这种方法不安全复杂对象没有类似JavaScript的表示形式。例如，test = [1,2,3,4,5,any]将呈现为[1, 2, 3, 4, 5, <built-in function any>]，但这只是一个示例，永远不会实现。

2. 在Flask中，可以使用tojson过滤器进行隐式转换为JavaScript对象：

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

如果对象可以被JSON序列化，那么所有内容都将被渲染，否则模板引擎将会抛出一个异常。

您也可以向模板发送javascript代码：

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

但这不是一个好的方法，最好使用tojson过滤器，它也是HTML标记安全的。

我更喜欢不在模板中混合任何JavaScript代码，并将模板、JavaScript和JavaScript数据与ajax分开。如果这个方法很难，我会选择使用tojson过滤器。

- tbicr

---

tojson过滤器可以生成一个HTML安全的值，而json.dumps()则不行。在生成JavaScript值时，在模板中始终使用|tojson，而不是json.dumps()。 - Martijn Pieters

Answer 2

您可以使用以下方式：

{{ test|safe }} 

或者

{{ test|tojson|safe }}

safe 过滤器应该在脚本标签内使用。

- liminal_

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>

- shaktimaan

---

这个不起作用！看起来JSON.parse(test}的大括号不匹配？ - knk

解析器在变量上返回未定义，我需要在这里添加一些额外的过滤器吗？ - knk

有一个错误，应该是 <script> var counts = JSON.parse("{{ test }}"); </script>，而且这样做没有意义，因为 <script> var counts = {{ test }}; </script> 会产生相同的结果，并且对于这个例子来说更加简短。没有理由重复使用JSON。 - tbicr

@tbicr 是的，我疏忽了那个。你是正确的。已更新。谢谢。 - shaktimaan

你根本不需要使用JSON.parse()；相反，你可以使用tojson来代替，它是一个HTML安全的JavaScript子集。 - Martijn Pieters

Answer 4

我从来不喜欢使用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>

- Ryan Loggerythm

Answer 5

您可以尝试像下面这样从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)

- Snehal Parmar