Django传json.dumps结果到前端 JS解析后无法转为字典如何解决

后端Inventory.objects.values_list('product_number','amount')返回的是元组列表结构，直接转list序列化后，前端JSON.parse拿到的是二维数组格式[[产品编号, 对应金额], [产品编号, 对应金额]]，不是键值对格式的JS对象，自然无法通过data[键名]的方式取值。
你之前调用Object.fromEntries报错、索引访问返回单个字符，是因为操作时误传入了未正确解析的JSON字符串，字符串按位迭代/索引访问时拿到的就是[、数字这类单个字符，不符合fromEntries要求的[key, value] entry结构，就会抛出类型错误。

二选一即可，优先选择后端修改方案，链路逻辑更顺畅：

方案1：后端直接输出字典结构（推荐） #

修改views.py中的序列化逻辑，把values_list返回的元组列表直接转成Python字典再序列化，前端拿到的就是标准键值对对象，无需额外处理：

# 原有写法
# data1 = Inventory.objects.values_list('product_number','amount')
# data = json.dumps(list(data1), cls=DjangoJSONEncoder)

# 修改后写法
data1 = Inventory.objects.values_list('product_number','amount')
data = json.dumps(dict(data1), cls=DjangoJSONEncoder)

修改后原有前端逻辑不需要调整，data[this.value]就能直接取到对应产品编号的金额值。

方案2：前端转换二维数组为对象 #

如果不方便调整后端代码，就在前端解析完JSON后，用Object.fromEntries直接把二维数组转成键值对对象，注意不要对解析结果做额外的字符串拆分、逐字符遍历操作：

const rawData = JSON.parse(document.getElementById('hello-data').textContent);
const data = Object.fromEntries(rawData);

document.getElementById('id_line_one').onchange = function(event){
    document.getElementById('id_line_one_unit_price').value = data[this.value];
};

注意：Object.fromEntries的入参必须是解析完成的二维数组，不要传入未解析的JSON字符串，否则就会复现你之前遇到的迭代值非法报错。

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