Как использовать переменные контекста, переданные из Django в javascript? Уже изменен на Json тип

Question

Я хочу создать таблицу в HTML, используя javascript. Теперь я сделал с заголовком и отображается правильно. Теперь я хотел бы добавить содержимое в таблицу, добавив из базы данных. Однако, как только я объявлю переменную контекста из созданного мной view.py, таблица исчезнет. Как я могу правильно вызвать данные из view.py, который я сделал в javascript? Я знал, что это должен быть стиль JSON. Как я могу это исправить? спасибо заранее.

views.py

@csrf_exempt
def test(request):
    return render(request, 'test.html')

def testJS_page(request):
    context_list = {}

    customers = Customer.objects.all()
    carts = Cart.objects.all().select_related('customer').order_by('customer_id')
    goods = Good.objects.select_related('cart__customer').order_by('cart_id')

    context_list['Cart'] = carts
    context_list['Good'] = goods
    context_list['Customer'] = customers
    context = {"Customer_status": json.dumps(context_list)}

    return render(request, 'test.html', context)

тест. js

var customer_status = ({{ Customer_status|safe }});

function createTable() {

  var myTableDiv = document.getElementById("myDynamicTable");
  var table = document.createElement('TABLE');
  var thread = document.createElement('THREAD');
  thread.className = "thead-dark";

  table.appendChild(thread);
  var tr1 = document.createElement('TR');
  thread.appendChild(tr1);
  var th1 = document.createElement('TH');
  var th2 = document.createElement('TH');
  var th3 = document.createElement('TH');
  var th4 = document.createElement('TH');
  th1.appendChild(document.createTextNode("Product"));
  th2.appendChild(document.createTextNode("Count"));
  th3.appendChild(document.createTextNode("Price"));
  th4.appendChild(document.createTextNode("Subtotal"));
  tr1.appendChild(th1);
  tr1.appendChild(th2);
  tr1.appendChild(th3);
  tr1.appendChild(th4);

  myTableDiv.appendChild(table);
}
createTable();

один раз я напишите код "var customer_status = ({{Customer_status | safe}});", кажется, что идет не так.

Answer 1

Мы не можем использовать контекстные переменные в .js файлах. Мы можем использовать их только в .html файлах.

---

Но вы можете сделать что-то подобное в вашем .html файле:

<script>
  var customer_status = JSON.parse("{{ Customer_status|safe }}");
</script>

И затем использовать customer_status["Good"] в ваших .js файлах.