JavaScript for循环生成Datamaps所需fillKey映射对象问题排查

核心错误原因 #

• 未初始化对象嵌套属性：data_color为普通对象，data_color[myJson_departement_list[x]["code_dept"]]默认是undefined，直接给其fillKey赋值会抛出异常，生成错误结构
• 区间判断边界遗漏：现有判断逻辑未覆盖等于50/51/100等边界值，会导致部分值匹配到错误区间
• 你猜测的interval需要额外加引号的问题不成立，JS中字符串变量本身自带字符属性，赋值时会自动处理，不需要额外添加引号

修正后完整代码 #

import departement_list from "../data/departements-region.json";
// 此处深拷贝如果没有修改原导入对象的需求可以直接删除
let myJson_departement_list = JSON.parse(JSON.stringify(departement_list));
let data_color = {};

for (let x in myJson_departement_list) {
  let dept_item = myJson_departement_list[x];
  let dept_name = dept_item["dep_name"];
  let total_parrainage = departement[dept_name] ?? 0; // 加兜底避免undefined导致的判断错误

  dept_item["total_parrainages"] = total_parrainage;

  let interval = "401-";
  if (total_parrainage <= 0) {
    interval = "defaultFill";
  } else if (total_parrainage <= 50) {
    interval = "1-50";
  } else if (total_parrainage <= 100) {
    interval = "51-100";
  } else if (total_parrainage <= 150) {
    interval = "101-150";
  } else if (total_parrainage <= 200) {
    interval = "151-200";
  } else if (total_parrainage <= 300) {
    interval = "201-300";
  } else if (total_parrainage <= 400) {
    interval = "301-400";
  }

  // 正确赋值方式：直接给省份code对应的key赋值完整对象
  data_color[dept_item["code_dept"]] = {
    fillKey: interval
  };
}

验证方式 #

循环执行完成后打印console.log(data_color)，即可看到符合要求的结构：

{
  AI: { fillKey: "defaultFill" },
  AS: { fillKey: "1-50" },
  // 其余省份对应数据
}

直接将该data_color传入Datamaps的data配置项即可正常渲染地图。

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