Получить список элементов, которые были переданы из файла python (Django) в html, из html в Javascript, который находится на той же странице

мой код на питоне: 

def index(request):
    body=list(Body.objects.all())
    loads=list(Load.objects.all().order_by('length'))
    badLoads=[]
    goodLoads=[]
    for load in loads:
        if load.length>body[0].length or load.width>body[0].width or load.mass>body[0].mass:
            badLoads.append(load)
        else:
            goodLoads.append(load)

    goodLoadsLength=len(goodLoads)
    context={
        'body':body[0],
        'loads':loads,
        'badLoads':badLoads,
        'goodLoads':goodLoads,
        'goodLoadsLength':goodLoadsLength,
    }
    return render(request,'index.html',context)

html код:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Positioning of objects</title>
</head>
<body>
    <div>
        {% if body %}
            <p>body length: {{ body.length }}, body width: {{ body.width }}, body height: {{ body.height }}, body max mass, which can be taken: {{ body.mass }}</p>
        {% else %}
            <p>No parameters found</p>
        {% endif %}
    </div>
    <div>
        {% if loads %}
            <ul>
            {% for load in loads %}
                <li>load id: {{ load.id }}, load length:{{ load.length }}, load width: {{load.width}}, load height: {{load.height}}, load mass: {{load.mass}}</li>
            {% endfor %}
            </ul>
        {% else %}
            <p>No loads are available.</p>
        {% endif %}
    </div>
    <div>
        {% if goodLoads %}
            <ul>
            {% for goodLoad in goodLoads %}
                <li>load id: {{ goodLoad.id }}, load length:{{ goodLoad.length }}, load width: {{goodLoad.width}}, load height: {{goodLoad.height}}, load mass: {{goodLoad.mass}}</li>
            {% endfor %}
            </ul>
        {% else %}
            <p>No loads are available.</p>
        {% endif %}
    </div>
    <div>
        {% if loads %}
        <ul>
        {% for badLoad in badLoads %}
            <li>load id: {{ badLoad.id }}, load length:{{ badLoad.length }}, load width: {{badLoad.width}}, load height: {{badLoad.height}}, load mass: {{badLoad.mass}}</li>
        {% endfor %}
        </ul>
        {% else %}
            <p>No loads are available.</p>
        {% endif %}
    </div>
    <script>
        const loadsLength="{{goodLoadsLength}}";
        const goodLoads="{{goodLoads}}"
    </script>
</body>
</html>

Я хотел бы сделать простую таблицу с помощью javascript на той же странице. Я знаю, что могу сделать таблицу через html, но я хотел бы сделать это через Javascript, на той же странице. Но почему-то я вижу в скрипте простые переменные, как вот эта:

const loadsLength="{{goodLoadsLength}}";

Но я не могу сделать список элементов. Количество элементов может быть разным. Поэтому он должен проходить через цикл for или forEach, но скрипт не дает мне никакой возможности получить члены списка в случае python (или массива в случае javascript) в блок javascript. Если я попытаюсь:

const goodLoads="{{goodLoads}}";
 console.log(goodLoads);

Это дает мне: 

[&lt;Load: Load object (1)&gt;]

Похоже, что он видит объект в массиве. Но когда я пытаюсь:

 console.log(goodLoads[0].length);

или

foodLoads.forEach(item=>{
    console.log(item.length)
})

Выдает: объект не определен. Я попробовал еще пару подходов, например, цикл for с for object in objects, или обычный цикл for с step++. Но объект не определен

Наверное, я не понимаю, как получить список/массив из html в блок скрипта. Он должен быть виден как обычный массив элементов. Но я не могу их получить. Может кто-нибудь подсказать мне ответ? Спасибо.

Используйте встроенный в Django json_script (см. документацию здесь) тег шаблона для безопасного вывода объекта python в виде JSON, обернутого в тег скрипта. Затем в вашем основном JS-скрипте вы можете разобрать JSON-объект и выполнить с ним все стандартные операции.

В вашем шаблоне:

{{ goodLoads|json_script:"goodLoads"}}

В вашем главном JS-файле:

 let goodLoads = JSON.parse(document.getElementById('goodLoads').textContent);

Другая проблема заключается в том, что вы передаете объекты QuerySet в контекстную переменную goodLoads. Эти объекты не очень полезно иметь в вашем JS-файле, потому что вы не можете получить доступ к значениям полей объекта. Для этого превратите объект QuerySet в dict, прежде чем передавать его в контекст.

Например, используя queryset.values(),

def index(request):
    body=list(Body.objects.all())
    loads=list(Load.objects.all().order_by('length'))
    badLoads=[]
    goodLoads=[]
    for load in loads:
        if load.length>body[0].length or load.width>body[0].width or load.mass>body[0].mass:
            badLoads.append(load.values()) #converting to dict here
        else:
            goodLoads.append(load.values()) #converting to dict here

    goodLoadsLength=len(goodLoads)
    context={
        'body':body[0],
        'loads':loads,
        'badLoads':badLoads,
        'goodLoads':goodLoads,
        'goodLoadsLength':goodLoadsLength,
    }
    return render(request,'index.html',context)
Вернуться на верх