如何在 JavaScript 中將元組的 Python 列表轉換為數組？

Question

我正在嘗試使用 Flask 制作一個網站，在那里我將 HTML 畫布數據傳遞到數據庫，然后在另一條路線中使用該數據。 當我從數據庫中檢索數據時，它是一個列表的形式，這是一個只有一個元素的列表示例：

[(1, 'circle', '{"pencil":[{"startx":346,"starty":105,"endx":346,"endy":105,"thick":2,"color":"#000000"},{"startx":346,"starty":105,"endx":344,"endy":104,"thick":2,"color":"#000000"},{"startx":346,"starty":105,"endx":341,"endy":103,"thick":2,"color":"#000000"},{"startx":346,"starty":105,"endx":338,"endy":103,"thick":2,"color":"#000000"},{"startx":346,"starty":105,"endx":336,"endy":103,"thick":2,"color":"#000000"},{"startx":346,"starty":105,"endx":333,"endy":103,"thick":2,"color":"#000000"},{"startx":346,"starty":105,"endx":330,"endy":103,"thick":2,"color":"#000000"},{"startx":346,"starty":105,"endx":338,"endy":107,"thick":2,"color":"#000000"},{"startx":346,"starty":105,"endx":338,"endy":107,"thick":2,"color":"#000000"},{"startx":346,"starty":105,"endx":336,"endy":107,"thick":2,"color":"#000000"},{"startx":346,"starty":105,"endx":336,"endy":109,"thick":2,"color":"#000000"}],"line":[],"rectangle":[],"circle":[],"eraser":[]}', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAu4AAAHCCAYAAACwm0waAAAAAXNSR0IArs4c6QAAIABJREFUeF7t3W2SI9lVBuDr/vD8gOgmAsLegNkGrB22Ke4KQjEiAAAECBAgQIEBAcbcHCBAgQIAAAQIECCQQ+D/vr4ThKs0KewAAAABJRU5ErkJggg==', '10', '10', '100', '100')]

根據此類問題中給出的幾個先前的答案，我嘗試了以下方法，首先我使用了json.dumps() ：

在燒瓶中：

files = json.dumps(files)
return render_template("edit.html", files=files)

在edit.html ，我簡單地將它傳遞給一個函數：

<button id="show" onclick="loadImages(`{{ files }}`)">View</button>

最后在edit.js ，我嘗試在數組中讀取它，如下所示：

function loadImages(sources) {
    var canvas = document.getElementById("paint");    
    var ctx = canvas.getContext("2d");

    console.log(sources);
    
    sources = JSON.parse(sources);
    console.log(typeof(sources)); 
    for(var i = 0; i < sources.length; i++) {
        ctx.drawImage(sources[i][3], sources[i][4], sources[i][5], sources[i][6], sources[i][7]);
    
    }
  }

但這會返回一個錯誤：

Uncaught SyntaxError: Unexpected token p in JSON at position 18
    at JSON.parse (<anonymous>)
    at loadImages (edit.js:16)
    at HTMLButtonElement.onclick (edit:39)

loadImages函數中console.log(sources)的輸出是：

[[1, "circle", "{"pencil":[{"startx":346,"starty":105,"endx":346,"endy":105,"thick":2,"color":"#000000"},{"startx":346,"starty":105,"endx":344,"endy":104,"thick":2,"color":"#000000"},{"startx":346,"starty":105,"endx":341,"endy":103,"thick":2,"color":"#000000"},{"startx":346,"starty":105,"endx":338,"endy":103,"thick":2,"color":"#000000"},{"startx":346,"starty":105,"endx":336,"endy":103,"thick":2,"color":"#000000"},{"startx":346,"starty":105,"endx":333,"endy":103,"thick":2,"color":"#000000"},{"startx":346,"starty":105,"endx":330,"endy":103,"thick":2,"color":"#000000"},{"startx":346,"starty":105,"endx":326,"endy":103,"thick":2,"color":"#000000"},{"startx":346,"starty":105,"endx":326,"endy":103,"thick":2,"color":"#000000"},{"startx":346,"starty":105,"endx":322,"endy":103,"thick":2,"color":"#000000"},{"startx":346,"starty":105,"endx":319,"endy":103,"thick":2,"color":"#000000"},{"startx":346,"starty":105,"endx":317,"endy":103,"thick":2,"color":"#000000"},{"startx":346,"starty":105,"endx":315,"endy":104,"thick":2,"color":"#000000"},{"startx":346,"starty":105,"endx":314,"endy":104,"thick":2,"color":"#000000"},{"startx":346,"starty":105,"endx":312,"endy":104,"thick":2,"color":"#000000"},{"startx":346,"starty":105,"endx":311,"endy":105,"thick":2,"color":"#000000"},{"startx":346,"starty":105,"endx":310,"endy":106,"thick":2,"color":"#000000"},{"startx":346,"starty":105,"endx":308,"endy":106,"thick":2,"color":"#000000"},{"startx":346,"starty":105,"endx":307,"endy":107,"thick":2,"color":"#000000"},{"startx":346,"starty":105,"endx":306,"endy":107,"thick":2,"color":"#000000"},{"startx":346,"starty":105,"endx":304,"endy":109,"thick":2,"color":"#000000"},{"startx":346,"starty":105,"endx":302,"endy":110,"thick":2,"color":"#000000"},{"startx":346,"starty":105,"endx":301,"endy":111,"thick":2,"color":"#000000"},{"startx":346,"starty":105,"endx":336,"endy":107,"thick":2,"color":"#000000"},{"startx":346,"starty":105,"endx":336,"endy":109,"thick":2,"color":"#000000"}],"line":[],"rectangle":[],"circle":[],"eraser":[]}", "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAu4AAAHCCAYAAACwm0waAAAAAXNSR0IArs4c6QAAIABJREFUeF7t3W2SI9lVBuDr/vD8gOgmAsLegNkGrB22ARuAgAimDT/G022ItCuH7LRUkkpS3vPxTITDMK5Snvu8N1VvZ6eyfjX8Q4AAAQIECBAgQIBAeIFfhZ/QgAQIECBAgAABAgQIDMXdJiBAgAABAgQIECCQQEBxTxCSEQkQIECAAAECBAgo7vYAAQIECBAgQIAAgQQCinuCkIxIgAABAgQIECBAQHG3BwgQIECAAAECBAgkEFDcE4RkRAIECBAgQIAAAQKKuz1AgAABAgQIECBAIIGA4p4gJCMSIECAAAECBAgQUNztAQIECBAgQIAAAQIJBBT3BCEZkQABAgQIECBAgIDibg8QIECAAAECBAgQSCCguCcIyYgECBAgQIAAAQIEFHd7gAABAgQIECBAgEACAcU9QUhGJECAAAECBAgQIKC42wMECBAgQIAAAQIEEggo7glCMiIBAgQIECBAgAABxd0eIECAAAECBAgQIJBAQHFPEJIRCRAgQIAAAQIECCju9gABAgQIECBAgACBBAKKe4KQjEiAAAECBAgQIEBAcbcHCBAgQIAAAQIECCQQUNwThGREAgQIECBAgAABAoq7PUCAAAECBAgQIEAggYDiniAkIxIgQIAAAQIECBBQ3O0BAgQIECBAgAABAgkEFPcEIRmRAAECBAgQIECAgOJuDxAgQIAAAQIECBBIIKC4JwjJiAQIECBAgAABAgQUd3uAAAECBAgQIECAQAIBxT1BSEYkQIAAAQIECBAgoLjbAwQIECBAgAABAgQSCCjuCUIyIgECBAgQIECAAAHF3R4gQIAAAQIECBAgkEBAcU8QkhEJECBAgAABAgQIKO72AAECBAgQIECAAIEEAop7gpCMSIAAAQIECBAgQEBxtwcIECBAgAABAgQIJBBQ3BOEZEQCBAgQIECAAAECirs9QIAAAQIECBAgQCCBgOKeICQjEiBAgAABAgQIEFDc7QECBAgQIECAAAECCQQU9wQhGZEAAQIECBAgQICA4m4PECBAgAABAgQIEEggoLgnCMmIBAgQIECAAAECBBR3e4AAAQIECBAgQIBAAgHFPUFIRiRAgAABAgQIECCguNsDBAgQIECAAAECBBIIKO4JQjIiAQIECBAgQIAAAcXdHiBAgAABAgQIECCQQEBxTxCSEQkQIECAAAECBAgo7vYAAQIECBAgQIAAgQQCinuCkIxIgAABAgQIECBAQHG3BwgQIECAAAECBAgkEFDcE4RkRAIECBAgQIAAAQKKuz1AgAABAgQIECBAIIGA4p4gJCMSIECAAAECBAgQUNztAQIECBAgQIAAAQIJBBT3BCEZkQABAgQIECBAgIDibg8QIECAAAECBAgQSCCguCcIyYgECBAgQIAAAQIEFHd7gAABAgQIECBAgEACAcU9QUhGJECAAAECBAgQIKC42wMECBAgQIAAAQIEEggo7glCMiIBAgQIECBAgAABxd0eIECAAAECBAgQIJBAQHFPEJIRCRAgQIAAAQIECCju9gABAgQIECBAgACBBAKKe4KQjEiAAAECBAgQIEBAcbcHCBAgQIAAAQIECCQQUNwThGREAgQIECBAgAABAoq7PUCAAAECBAgQIEAggYDiniAkIxIgQIAAAQIECBBQ3O0BAgQIECBAgAABAgkEFPcEIRmRAAECBAgQIECAgOJuDxAgQIAAAQIECBBIIKC4JwjJiAQIECBAgAABAgQUd3uAAAECBAgQIECAQAIBxT1BSEYkQIAAAQIECBAgoLjbAwQIECBAgAABAgQSCCjuCUIyIgECBAgQIECAAAHF3R4gQIAAAQIECBAgkEBAcU8QkhEJECBAgAABAgQIKO72AAECBAgQIECAAIEEAop7gpCMSIAAAQIECBAgQEBxtwcIECBAgAABAgQIJBBQ3BOEZEQCBAgQIECAAAECirs9QIAAAQIECBAgQCCBgOKeICQjEiBAgAABAgQIEFDc7QECBAgQIECAAAECCQQU9wQhGZEAAQIECBAgQICA4m4PECBAgAABAgQIEEggoLgnCMmIBAgQIECAAAECBBR3e4AAAQIECBAgQIBAAgHFPUFIRiRAgAABAgQIECCguNsDBAgQIECAAAECBBIIKO4JQjIiAQIECBAgQIAAAcXdHiBAgAABAgQIECCQQEBxTxCSEQkQIECAAAECBAgo7vYAAQIECBAgQIAAgQQCinuCkIxIgAABAgQIECBAQHG3BwgQ6CLwxzHGke95X8cYH7vgWicBAgQIPF/gyB9iz1+NIxAgQODPAj+OMT4FwfjfMca7ILMYgwABAgQSCyjuicMzOgECJwVeK+1HlOifxxgfdpMtV/vfy4sAAQIECNwggg==", "10", "10", "100", "100"]]

我嘗試了多種方法來完成這項工作，但這是我能達到的最接近我想要的，我該如何解決這個問題？

Answer 1

我在這段代碼中發現了一些問題 - 都是模板：

1. 燒瓶中的模板會轉義數據（以使其更安全），因此使用{{ file }}創建 HTML

    [[1, "circle", "{\\"pencil\\":[

   如果您使用Show Page Source ( Ctrl+U )，您可以在瀏覽器中看到它。

   它需要{{ file|safe }}來創建正確的 HTML

    [[1, "circle", "{\\"pencil\\":[

2. 它不需要在loadImages( ``...`` )中loadImages( ``...`` )

3. 因為files將字符串與" "放在一起，所以loadImage必須在' '

    onclick='loadImages({{ files|safe }})'

4. 瀏覽器將files文本視為普通代碼，因此它在加載時解析數據並且不需要JSON.parse()

5. 要繪制圖像，您必須創建Image並將數據分配給.src

    var img = new Image(); img.src = sources[i][3]; ctx.drawImage(img, ...)

---

最少的工作代碼

編輯：

你不必使用json.dumps(data)但{{ data|tojson }}

最終您可以使用{{ data|safe }}但它需要將一些" "更改為' ' 。

from flask import Flask, request, render_template_string
import json

app = Flask(__name__)

data = [(1, 'circle',
         '{"pencil":[\
             {"startx":346,"starty":105,"endx":346,"endy":105,"thick":2,"color":"#000000"},\
             {"startx":346,"starty":105,"endx":344,"endy":104,"thick":2,"color":"#000000"},\
             {"startx":346,"starty":105,"endx":341,"endy":103,"thick":2,"color":"#000000"},\
             {"startx":346,"starty":105,"endx":338,"endy":103,"thick":2,"color":"#000000"},\
             {"startx":346,"starty":105,"endx":336,"endy":103,"thick":2,"color":"#000000"},\
             {"startx":346,"starty":105,"endx":333,"endy":103,"thick":2,"color":"#000000"},\
             {"startx":346,"starty":105,"endx":330,"endy":103,"thick":2,"color":"#000000"},\
             {"startx":346,"starty":105,"endx":338,"endy":107,"thick":2,"color":"#000000"},\
             {"startx":346,"starty":105,"endx":338,"endy":107,"thick":2,"color":"#000000"},\
             {"startx":346,"starty":105,"endx":336,"endy":107,"thick":2,"color":"#000000"},\
             {"startx":346,"starty":105,"endx":336,"endy":109,"thick":2,"color":"#000000"}],\
          "line":[],"rectangle":[],"circle":[],"eraser":[]\
         }',
         'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAAAAACoWZBhAAAAMklEQVR4nEXNwQkAMBACwfFI/y2bxwXia8FFUwF1pCCNJTIIwaD04ctsKRyaldI/9i8u1iwOE6FA880AAAAASUVORK5CYII=',
         '10', '10', '10', '10'
)]

@app.route('/', methods=['GET', 'POST'])
def index():
    text = json.dumps(data)
    return render_template_string('''
<script>
function loadImages(sources) {
    console.log(sources);

    var canvas = document.getElementById("paint");    
    var ctx = canvas.getContext("2d");
    
    for(var i = 0; i < sources.length; i++) {
        var data = sources[i]
        console.log(data[3]);
        var img = new Image();
        img.src = data[3];
        ctx.drawImage(img, data[4], data[5]); //, data[6], data[7]);
    }
}
</script>

<body>
<h1>files</h1>
<pre>{{ files }}</pre>
<h1>files|safe</h1>
<pre>{{ files|safe }}</pre>
<h1>files|tojson</h1>
<pre>{{ files|tojson }}</pre>
<hr>

<canvas id="paint" width="100" height="100"></canvas><br/>

<button id="show" onclick='loadImages({{ files|safe <button id="show" onclick='loadImages({{ files|safe }})'>View files|safe</button>

<button id="show" onclick='loadImages({{ data|tojson }})'>View data|tojson</button>

<button id="show" onclick="loadImages({{ data|safe }})">View data|safe</button>

</body>
''', files=text, data=data)
if __name__ == '__main__':
    #app.debug = True 
    app.run()

對於您的data:image我得到錯誤image broken所以我使用我的小圖標 10x10

但我不知道為什么但有時我必須單擊按鈕兩次才能看到圖像。