无法从最初是 Flask 中的 Python 字典的 JSON 对象访问数据

Question

这里是新手。我正在为介绍 CS 课程使用公寓大楼和公寓单元的数据库，并尝试使用烧瓶构建 Web 应用程序。

在 application.py 中，我有这样的东西：

locationdict = 

{
    "Complex A": [1, 2, 3],
    "Complex B": [4, 5, 6]
}

JSONlocationdict = json.dumps(locationdict, sort_keys=True)

return render_template("start.html", JSONlocationdict=JSONlocationdict)

但是，当我尝试从 JavaScript 中的字典访问该数据时，似乎没有任何效果。 HTML 页面大致如下所示：

<button onclick = "getUnits(this)" id="Complex A"> Complex A </button>

<script>

    function getUnits(arg) {

         var locationName = arg.getAttribute("id");

         var JSONlocationdict = "{{ JSONlocationdict }}";

         console.log(JSONlocationdict)

//  In the console, this is what you see: 
//  {&#34;Complex A&#34;: [1,2,3], &#34;Complex B&#34;, [4,5,6]}

         var obj = JSON.parse(JSONlocationdict);

         console.log(obj); // this returns the error

//  Then you see this in the console:
//  Uncaught SyntaxError: Unexpected token & in JSON at position 1
//  at JSON.parse (<anonymous>)
//  at getUnits (start:88)
//  at HTMLButtonElement.onclick (start:119)

    var units = obj["Complex A"];

    console.log(units); 

// That last request to log to the console does nothing so far.

   }
</script>

我尝试使用不同的方法将原始字典转换为 JSON，例如 jsonify 和 json.loads() 而不是 dumps()。我已经在 stackoverflow 上浏览了大量关于 SyntaxError: Unexpected token 的条目，但我似乎无法得到任何工作。有什么想法吗？？

似乎唯一可靠的是有两个单独的页面 - 用户可以从公寓大楼列表中选择的第一页，然后将它们发送到第二页，然后他们可以选择单元。

如果他们可以单击公寓大楼的按钮，然后在同一页面上动态生成该公寓大楼的可用单元列表，那就太好了。

Answer 1

Flask 方法 render_template 将您的 JSON 转换为字符串，您可以通过记录 JSONlocationdict 看到。由于它将字符串呈现为 HTML，因此它会转义双引号字符，这是您的 JavaScript 解析时遇到的问题。

要解决此问题，您需要先取消转义 JSONlocationdict，然后再将其传递给 JSON.parse。有很多方法可以做到这一点，如果您想在浏览器中执行此操作，the accepted answer here 应该适用于您的情况。

function htmlDecode(input){
  var e = document.createElement('textarea');
  e.innerHTML = input;
  // handle case of empty input
  return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
}

t = '{"Complex A": [1,2,3], "Complex B": [4,5,6]}'

x = htmlDecode(t)

console.log(JSON.parse(x))

注意：在上面的 sn-p 中，我必须编辑您问题中的 console.log 响应，以便在“Complex B”之后添加：而不是那里的逗号。
如果结果实际上是您的问题，那么尽管您的 Flask 代码看起来正确，但 Flask 的 JSON 格式不正确。

还有其他方法可以使用 AJAX 和另一个返回 jsonify 响应的 Flask URL 来完成此任务。还有一些模板过滤器（如 |safe）可以做到这一点，但取决于您使用的模板库。