Django API JSONField数据无法用.map解析构建Apex Chart求助

核心问题 #

你获取到的data.data.linechart是非标准JSON格式的字符串：它用单引号'包裹键和值，但JSON规范强制要求使用双引号"。直接调用JSON.parse()会解析失败，若错误地对该字符串使用.map()，JavaScript会把字符串当作字符数组遍历，自然会拆分出单个字符。

解决步骤 #

临时修复（前端处理） #

先将字符串中的单引号全局替换为双引号，再解析成可操作的数组：

const rawStr = data.data.linechart;
// 把所有单引号替换为双引号，转为标准JSON格式字符串
const validJsonStr = rawStr.replace(/'/g, '"');
// 解析为数组
const chartData = JSON.parse(validJsonStr);
// 现在可以正常使用.map()处理
chartData.map(item => {
  console.log(item.index, item.Strategy);
});

注意：如果你的数据中存在带单引号的字符串值（比如{'name': "O'Neil"}），这种替换会破坏数据，此时优先选择后端修复。

彻底修复（Django后端） #

问题本质是Django序列化时未正确处理JSONField，导致输出的是字符串化的类JSON内容而非原生JSON结构。调整序列化逻辑：

• 使用Django REST Framework的serializers.JSONField直接序列化该字段，它会自动将JSONField的数据转为原生JSON结构返回，而非字符串。
• 避免手动用str()或json.dumps()处理该字段后再返回。

示例序列化器代码：

from rest_framework import serializers
from .models import YourModel

class YourModelSerializer(serializers.ModelSerializer):
    linechart = serializers.JSONField()  # 直接使用JSONField，自动输出原生JSON

    class Meta:
        model = YourModel
        fields = ['linechart']

修复后前端Fetch到的data.data.linechart就是直接可用的数组，无需额外解析。

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