二次元配列をPython側からhtml側に型を維持したまま渡したい

Question

###前提・実現したいこと
Djangoにて Python側で二次元配列を作成しました。
その二次元配列をhtml,Javascript側に渡すと二次元配列ではなく、1行の文字列として扱われてしまいます。
Json.dumps()を使用してJsonデータに変換すれば良いと思ったのですが、上手く値を渡すことができず困っています。
出来ればJavascript側で配列を作り直すことは避けたいと考えています。
二次元配列をPython側からhtml側にlist型まま渡すことは可能なのでしょうか？

###Javascript内、console.logで表示したデータ

// Python側から受け取ったデータ
[['0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0'], ['0', '1', '1', '1', '1', '1', '1', '1', '1', '1', '1', '1', '0'], ['0', '1', '1', '1', '1', '1', '1', '1', '1', '1', '1', '1', '0'], ['0', '1', '1', '1', '1', '1', '1', '1', '1', '1', '1', '1', '0'], ['0', '1', '1', '1', '1', '1', '1', '1', '1', '1', '1', '1', '0'], ['0', '1', '1', '1', '1', '1', '1', '1', '1', '1', '1', '1', '0'], ['0', '1', '1', '1', '1', '1', '1', '1', '1', '1', '1', '1', '0'], ['0', '1', '1', '1', '1', '1', '1', '1', '1', '1', '1', '1', '0'], ['0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0']]

// Javascript内で作った二次元配列
sample.js:30 [Array[13], Array[13], Array[13], Array[13], Array[13], Array[13], Array[13], Array[13], Array[13]]

-> 配列ではなく、文字列として扱われている

###該当のソースコード

# 省略
    newArray = [['0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0'],
                ['0', '1', '1', '1', '1', '1', '1', '1', '1', '1', '1', '1', '0'],
                ['0', '1', '1', '1', '1', '1', '1', '1', '1', '1', '1', '1', '0'],
                ['0', '1', '1', '1', '1', '1', '1', '1', '1', '1', '1', '1', '0'],
                ['0', '1', '1', '1', '1', '1', '1', '1', '1', '1', '1', '1', '0'],
                ['0', '1', '1', '1', '1', '1', '1', '1', '1', '1', '1', '1', '0'],
                ['0', '1', '1', '1', '1', '1', '1', '1', '1', '1', '1', '1', '0'],
                ['0', '1', '1', '1', '1', '1', '1', '1', '1', '1', '1', '1', '0'],
                ['0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0']]

    print(type(newArray)) # list
    json.dumps(mapArray)
    data = {
        'mapData': mapArray,
        'block_size': block_size,
    }
    return render(request, 'htmlName.html', data)

<!-- 省略 -->
<script>
  var mapData = "{{ mapData|safe }}";
    console.log(mapData);
</script>

###補足情報(言語/FW/ツール等のバージョンなど)
Python3.4.4
Django1.9.6
HTML5
Javascript

Answer 1

配列ではなく、文字列として扱われている

そう判断した根拠は何でしょうか。上にあるJavaScript側の表示を見ると、きちんと「配列の配列」として扱われているように見えます（JavaScriptに配列と異なるリスト型は、標準では用意されていません）。

Comments

[tornadon]

紛らわしい書き方をしてしまい申し訳ありません、Javascriptの配列とPythonのlist型は違うものなのですね。
本来は上記の // Javascript内で作った二次元配列
sample.js:30 [Array[13]...
のように表示されるはずが、受け取ったデータを配列型の変数に代入しても二次元配列ではなく、['']等も含めて一つの文字列として扱わてしまいます。
試しに、受け取ったデータを代入した 配列[0][0] をconsole.log()で表示すると [ の文字列が表示されます。本来意図していたものは 0 、または１の文字列であり、[]や’’までが文字列として扱われてしまうことは想定していませんでした。

[maisumakun]

PythonからJSONで渡して、JavaScript側でJSON.parseする、という方法を取るのはどうでしょうか。

[tornadon]

Javascirpt側で
var mapData = "{{ mapData|safe }}";
var ans = new Array();
ans = JSON.parse(JSON.stringify(mapData));
console.log(ans[0][0]);
のようにコードを記述したところ
やはり [ が入っており、配列のlengthを見たところ明らかに[]や’’を含んだ数であったため、parseが上手くいっていない物と思われます。
これはJavascript側の問題なのでしょうか
それともそもそもpython側からjson形式で送ることに失敗しているのでしょうか

Answer 2

  var mapData = "{{ mapData|safe }}";

↑を↓とすればいいような気がするのですが、いかがでしょうか。

  var mapData = {{ mapData|safe }};

Comments

[tornadon]

大変申し訳ございません。
まさにその通りでした。解決しました。
3日ほど格闘していたためとても助かりました。