Uncaught TypeError: Невозможно прочитать свойства неопределенного (чтение 'amount')

Я преобразовал модели Django в объект данных JSON и обратился к нему в Javascript. Однако я не могу получить доступ к полю из объекта и присвоить его текстовому полю.

Возвращаемый объект JSON: 

[{"model": "inventory.inventory","pk": 1, "fields":
{"product": "nice", "title": "Asus", "amount": 56000}},
{"model": "inventory.inventory", "pk": 2, "fields":
{"product": "nice", "title": "Lenovo", "amount": 55000}}]

Код javascript, который я использую:

    <html>....{{ data|json_script:"hello-data" }}....
    <script type="text/javascript">
    const data = JSON.parse(document.getElementById('hello-data').textContent);

    document.getElementById('id_line_one').onchange = function(){
        var line_one=document.getElementById('id_line_one').value;
        var id=line_one-1;
        document.getElementById('id_line_one_unit_price').value = data[id].fields.amount;
    };

</script>....</html>

Screenshot Выпадающее значение возвращает свой первичный ключ, т.е. product_number, и в основном я хочу получить amount продукта, связанного с этим product_number. Поскольку объекты хранятся с 0(?) в JSON, я думал, что логика моего кода была правильной, но я не эксперт, поэтому я уверен, что делаю какую-то глупую ошибку. Как я могу вернуть сумму объекта в текстовом поле unit price, когда название выбрано в выпадающем списке? Спасибо!

views.py

@login_required
def add_invoice(request):
  form = InvoiceForm(request.POST or None)
  data = serializers.serialize("json", Inventory.objects.all())
  total_invoices = Invoice.objects.count()
  queryset = Invoice.objects.order_by('-invoice_date')[:6]

  if form.is_valid():
    form.save()
    messages.success(request, 'Successfully Saved')
    return redirect('/invoice/list_invoice')
context = {
    "form": form,
    "title": "New Invoice",
    "total_invoices": total_invoices,
    "queryset": queryset,
    "data": data,
}
return render(request, "entry.html", context)

в вашем случае лучше использовать array.find()

document.getElementById('id_line_one').onchange = function(event){
        let elementInData = data.find(() => item.pk == event.target.value);
        document.getElementById('id_line_one_unit_price').value = elementInData && elementInData.amount ? elementInData.amount : 0;
    };

но вы можете создать свои данные в виде словаря:

data = serializers.serialize("json", Inventory.objects.in_bulk())

после этого вы должны увидеть в javascript:

data = JSON.parse(document.getElementById('hello-data').textContent);

// data is {1: {"model": "inventory.inventory","pk": 1, "fields":
{"product": "nice", "title": "Asus", "amount": 56000}}, ...}

после этого вы можете достичь каждого элемента с помощью клавиш:

document.getElementById('id_line_one_unit_price').value = data[event.target.value].fields.amount

без arr.find().

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