Использование javascript для отображения объекта django

Я хочу реализовать следующее с помощью javascript, чтобы при нажатии на строку получался индекс и отображался объект этого индекса.

в шаблоне django это работает.

<div>{{ project.0.customer_name}}</div>
<div>{{ project.1.customer_name}}</div>

но приведенный ниже javascript не работает, даже я получаю правильный ID.

var cell = row.getElementsByTagName("td")[0];
var id=  parseInt(cell.innerHTML);
// not working
document.getElementById('lblname').innerHTML =   '{{ project.id.customer_name}}';

// this is also working but what I want is dynamic base on row click
document.getElementById('lblname').innerHTML = '{{ project.1.customer_name}}';

отображение объекта django с помощью индекса в javascript.

Вы должны понять, что происходит с вашим кодом:

Подобные шаблоны обрабатываются на сервере:

'{{ project.id.customer_name}}'

Я полагаю, что у вас нет project.id на стороне сервера, поэтому вы получаете None в приведенной выше строке, а тег moustache становится чем-то вроде пустой строки, и фактический код JavaScript выглядит следующим образом:

document.getElementById('lblname').innerHTML = '';

Только сейчас JS-код выполняется, и вы можете представить, что он сделает.

Вы хотите обрабатывать теги усов после того, как переменная id была установлена в JS, а это не то, как все работает (по крайней мере, если у вас нет какой-то сумасшедшей цепочки инструментов).

Один из способов добиться желаемого - предоставить JavaScript весь объект (или массив) целиком, выполнив следующее:project 

<script>
const project = {{ project|safe }};
</script>

Полный шаблон Django может выглядеть следующим образом (я использовал <span>s вместо ячеек таблицы:

) 
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>django test</title>
</head>
<body>
{% block content %}
{% for item in project %}
<span data-id="{{ forloop.counter }}">{{ forloop.counter }}</span>
{% endfor %}

<div id="output" style="display: flex; flex-direction: column-reverse;">
</div>

<script>
const project = {{ project|safe }};
const spans = document.getElementsByTagName('span');
const output = document.getElementById('output');

const onSpanClick = (event) => {
    const id = parseInt(event.target.getAttribute('data-id'), 10) - 1; // forloop.counter is 1-based, JS arrays are 0-based
    const div = document.createElement('div');
    div.innerHTML = project[id].customer_name;
    output.appendChild(div);
}

Array.from(spans).forEach(span => {
    span.addEventListener('click', onSpanClick);
})

</script>
{% endblock %}
</body>
</html>

Другой способ - это способ AJAX: вы создаете конечную точку API на стороне сервера, так что URL, например example.com/api/customer_name/?id=999, отвечает вам именем клиента id=999, когда вы нажимаете на какой-то элемент и вызываете XMLHttpRequest с параметром id=999.

Вернуться на верх