从 JSON object 访问数据时遇到问题，该 Python 字典在 Z9784E91C7B2657919722BC76 中

Question

新手来了我正在为介绍 CS class 使用公寓大楼和公寓单元的数据库，并尝试使用 flask 构建 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 的条目，但我似乎无法得到任何工作。 有任何想法吗？？

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

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

Answer 1

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

要解决此问题，您需要先取消转义 JSONlocationdict，然后再将其传递给 JSON.parse。 有很多方法可以做到这一点，如果你想在浏览器中这样做， 这里接受的答案应该适用于你的情况。

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

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

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