DjangoでJavaScriptに深い構造のデータを簡単に渡す

DjangoからデータをウェブページのJavaScriptに渡し、JSを使用して処理したい場合があります。
たとえば、Vue.jsを使用してデータをwebページに表示させます。

views.py

import json
from django.shortcuts import render


def home(request):
    books_py = [
        {
            'code': '00009',
            'name': 'はじめてのC',
            'publisher': '技術評論社',
            'price': 2178,
            'count': 1
        },
        {
            'code': '01002',
            'name': 'やさしいC＋＋',
            'publisher': 'SOFTBANK',
            'price': 2500,
            'count': 1
        },
        {
            'code': '20006',
            'name': '実践SQL',
            'publisher': 'SOFTBANK',
            'price': 2800,
            'count': 1
        }
    ]

    return render(request, 'home.html', {'books': json.dumps(books_py)})

home.html

......

<script>

    var books = {{ books|safe }};
    console.log(books);

</script>

......

実行結果：