在 javascript 中访问 jinja python 列表的问题答案

【问题标题】：Issue with accessing jinja python list in javascript在 javascript 中访问 jinja python 列表的问题
【发布时间】：2021-06-11 16:08:22
【问题描述】：

我有一个名为“设备”的 python 列表，看起来像这样：

[{
  'Version': 'V14E',
  'DeviceID': 'e00fce68281671574f416a8c',
  'TerminationDate': '2050-12-31',
  'Latitude': 31.322139613573903,
  'ActivationDate': '2021-01-04',
  'Longitude': -101.93960164357534,
  'DeviceName': 'Hans_Gruber-1'
}, {
  'Version': 'V14E',
  'DeviceID': 'e00fce68e1265e12e12fa02a',
  'TerminationDate': '2050-12-31',
  'Latitude': 31.32151602493975,
  'ActivationDate': '2021-01-04',
  'Longitude': -101.93948944894449,
  'DeviceName': 'Hans_Gruber-2'
}]

在我的烧瓶应用程序中，我使用 json.dumps() 将此列表传递给名为“devices_test”的 html 文件，以正确格式化要在 java 脚本中使用的数据。

return render_template("json_form.html", 
  devices = devices, components = components, operator = operator, name = site_name, 
  devices_test = json.dumps(devices))

这是我试图通过“数据”变量测试我在另一篇文章中看到的答案：

function update_device_form(strDevice) {

  var data = {
    {
      devices_test | safe
    }
  };

  var device_index = document.getElementById("devices").selectedIndex;

  if (device_index == 0) { //IOW if no device is selected
    document.getElementById("device_id").value = "";
  } else {
    document.getElementById("device_id").value = '';
  }

但我收到诸如“预期声明或语句”和“预期属性分配”和“预期”之类的错误。我在这里做错了什么？

【问题讨论】：

你有单独的 js 文件还是 javascript 是内联在 html 文件中的。
@charchit javascript 在 html 文件中
试试这个var data = "{{devices_test|safe}}"
@charchit 消除了错误，但我尝试通过var data = "{{devices_test[0]['DeviceID'] | safe}}"; 和document.getElementById("device_id").value = data; 对其进行测试，但它没有输出任何内容，因此看起来“数据”中没有存储任何内容。奇怪...

标签： javascript python-3.x flask jinja2

【解决方案1】：

您可以使用字符串来消除错误var data = "{{devices_test|safe}}"

现在数据不是javascript对象，它是一个字符串，你需要使用JSON.parse和replaceAll。

var data = "{{devices_test|safe}}"
var data = data.replaceAll("'",'"') // replace single quote to double
var data = JSON.parse(data)

一行

var data = JSON.parse("{{devices_test|safe}}".replaceAll("'",'"'))

【讨论】：

这似乎破坏了我的整个“update_device_form()”功能；当该行代码存在时，函数中的任何代码都不会运行。关于为什么这可能会破坏我的 java 脚本的任何线索？
控制台中的任何错误。因为它运行得很好
控制台中没有错误，但是当该代码存在时，它下面的任何内容都不起作用。
使用此代码var data = JSON.parse("{{devices_test|safe}}".replaceAll("'",'"')) document.getElementById("device_id").value = "foo"; 输入框没有任何内容，即使它应该有“foo”。但是，当我将您的代码行注释掉时：document.getElementById("device_id").value = "foo"; 然后输入框中的“foo”就像它应该的那样。所以我认为您的代码行出于某种原因破坏了该功能。
这在我的机器上运行良好。检查 devices_test 是否是正确的字典。