Django传递JSON数组到前端JS赋值文本框异常问题

• 存在双重JSON序列化问题：你在视图层手动调用json.dumps()序列化了一次数据，模板中使用的json_script标签本身会自动对传入值做JSON序列化和安全转义，两层序列化后前端JSON.parse得到的结果是字符串而非预期的数组/对象，按下标取值实际取的是字符串对应位置的字符。
• 原有数据结构为二维数组[[主键, 单价], ...]，无法直接通过主键作为键快速匹配对应单价，需要调整为键值对结构提升查询效率。

1. 调整后端视图代码 #

去掉手动json.dumps逻辑，直接将查询结果转为{product_number: amount}格式的字典传入上下文，json_script标签会自动完成安全序列化：

def add_invoice(request):
  form = InvoiceForm(request.POST or None)
  total_invoices = Invoice.objects.count()
  queryset = Invoice.objects.order_by('-invoice_date')[:6]

  # 直接将查询结果转为主键为键、单价为值的字典，无需手动序列化
  data = dict(Inventory.objects.values_list('product_number','amount'))

  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)

2. 调整前端JS代码 #

解析后直接得到主键-单价的映射对象，无需额外遍历数组，直接通过选中的商品主键取值即可：

{{ data|json_script:"hello-data" }}
<script type="text/javascript">
    const priceMap = JSON.parse(document.getElementById('hello-data').textContent);
    document.getElementById('id_line_one').onchange = function(event){
        const selectedPid = event.target.value;
        // 匹配到对应单价则填充，未匹配到则留空
        document.getElementById('id_line_one_unit_price').value = priceMap[selectedPid] || '';
    };
</script>

修复后选中主键为1的商品，会自动取到对应单价56000填充到输入框；选中主键为2的商品，会自动填充55000，不会再出现取到字符串单个字符的异常。

内容的提问来源于stack exchange，提问作者perpetualdarkness