Uncaught TypeError: data.find is not a function

[Kiran Chavan]

I am trying to convert the model instances into a JSON object and then according to the value selected in the dropdown menu, I want to assign its amount to the `line_one_unit_price` text field in the form.

Javascript code:

{{ 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(event){
let elementInData = data.find(() => item.pk == event.target.value);
document.getElementById('id_line_one_unit_price').value = elementInData && elementInData.amount ? elementInData.amount : 0;
};

</script>

I guess, I am getting the error at `data.find` because `.find` is used on an array whereas the constant `data` is not an array? How do I convert that JSON object into an array? how do I assign the amount of the `title` selected in the forms to the `line_one_unit_price`?

[![ss][1]][1]

When I click some title from the dropdown, I want the amount to be displayed in the `Unit Price`.

`views.py`:

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)

`models.py`:

class Inventory(models.Model):
product_number = models.IntegerField(primary_key=True)
product = models.TextField(max_length=3000, default='', blank=True, null=True)
title = models.CharField('Title', max_length=120, default='', blank=True, unique=True)
amount = models.IntegerField('Unit Price', default=0, blank=True, null=True)

def __str__(self):
return self.title

Thanks.

[1]: https://i.stack.imgur.com/9x6uC.jpg

[Jon Ribbens]

On 2022-07-10, Kiran Chavan <kirani...@gmail.com> wrote:
> I am trying to convert the model instances into a JSON object and then
> according to the value selected in the dropdown menu, I want to assign
> its amount to the `line_one_unit_price` text field in the form.
>
> Javascript code:
>
> {{ data|json_script:"hello-data" }}

...

> I guess, I am getting the error at `data.find` because `.find` is used
> on an array whereas the constant `data` is not an array? How do I
> convert that JSON object into an array?

...

> def add_invoice(request):
> form = InvoiceForm(request.POST or None)
> data = serializers.serialize("json", Inventory.objects.all())

The key problem is that you are *double*-encoding your data as JSON.
First using 'serializers.serialize', and then again with 'json_script'.

You'd have to send it through JSON.parse twice in order to turn it
back into the objects you want - but of course that would be the wrong
fix, the correct fix would be to only JSON-encode it once. But note,
removing the 'json_script' filter would not be the right way to do that.