如何提取JavaScript中Java HashMap转JSON的未知属性键值

核心逻辑 #

Java HashMap序列化为JSON后，传递到前端会被解析为标准的JavaScript普通对象，不需要提前预知内部属性字段名，直接使用JavaScript内置的对象遍历API即可拆分键、值内容，无需额外做序列化字符串转换。

问题定位 #

原有代码的问题在于对obj.student（即HashMap对应的JS对象）调用了JSON.stringify()，将整个键值对象转换为了完整字符串，导致无法拆分姓名、成绩字段。实际上obj.student是可直接操作的结构化对象，例如Java中存入put("Paul", 9)、put("Lily", 8.5)的HashMap，前端拿到的obj.student结构为：

{
  "Paul": 9,
  "Lily": 8.5
}

实现代码 #

直接使用Object.keys()提取对象所有键作为x轴的学生姓名数据，Object.values()提取所有值作为y轴的成绩数据即可，修正后的遍历逻辑如下：

// 提前初始化存储数组
const xValues = [];
const yValues = [];
const studentNameAxis = [];
const studentScoreAxis = [];

for (let i = 0; i < jsonString.length; i++) {
  const obj = jsonString[i];
  // 提取固定命名字段
  xValues[i] = obj.name;
  yValues[i] = obj.id;

  // 拆分HashMap转来的student对象的键和值
  const studentNames = Object.keys(obj.student);
  const studentScores = Object.values(obj.student);

  // 将学生姓名、成绩平铺到对应坐标轴数组，可直接传入Chart.js使用
  studentNameAxis.push(...studentNames);
  studentScoreAxis.push(...studentScores);
}

可选扩展 #

如果需要逐个校验、过滤每一组姓名-成绩的对应关系，避免顺序错位，可以使用Object.entries()遍历：

Object.entries(obj.student).forEach(([name, score]) => {
  // 可在此处添加数据校验逻辑，比如过滤成绩为空、姓名格式异常的数据
  studentNameAxis.push(name);
  studentScoreAxis.push(score);
});

注意：目前所有主流浏览器、Node.js环境下，Object.keys、Object.values、Object.entries返回的键值顺序和Java HashMap序列化时的存入顺序一致，不会出现键值匹配错位问题，处理后的数据可直接赋值给Chart.js的x轴、y轴配置项。

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