如何根据JS对象属性数量动态创建对应HTML元素

1. 统计有效Layer数量的方法 #

feature.properties是普通JS对象，并非数组，所以.length属性完全无效。要统计有效Layer组数，有两种实用思路：

方法一：筛选Layer_开头的属性键 #

直接遍历所有属性键，筛选出以Layer_开头的项，这些项的数量就是Layer组数：

function countLayers(feature) {
  const layerKeys = Object.keys(feature.properties).filter(key => key.startsWith('Layer_'));
  return layerKeys.length;
}

方法二：循环校验Layer_n与name_n配对 #

如果担心数据存在只有Layer_n却无对应name_n的无效项，可循环检查每一组，直到找不到配对的属性：

function countValidLayers(feature) {
  const props = feature.properties;
  let count = 0;
  let n = 1;
  while (props[`Layer_${n}`] && props[`name_${n}`]) {
    count++;
    n++;
  }
  return count;
}

这种方法更严谨，适合数据不够规整的场景。

2. 动态创建复选框的代码示例 #

拿到Layer数量后，循环生成对应的复选框元素，将Layer_n作为复选框值，name_n作为显示文本：

function buildLayerCheckboxes(feature) {
  const props = feature.properties;
  const groupName = props.Group_Name;
  const container = document.createElement('div');
  
  // 添加分组标题
  const title = document.createElement('h3');
  title.textContent = groupName;
  container.appendChild(title);
  
  // 获取有效Layer数量
  const layerCount = countValidLayers(feature);
  
  // 循环创建每个复选框
  for (let n = 1; n <= layerCount; n++) {
    const layerId = props[`Layer_${n}`];
    const layerName = props[`name_${n}`];
    
    const wrapper = document.createElement('div');
    
    const checkbox = document.createElement('input');
    checkbox.type = 'checkbox';
    checkbox.id = `layer-${layerId}`;
    checkbox.value = layerId;
    
    const label = document.createElement('label');
    label.htmlFor = `layer-${layerId}`;
    label.textContent = layerName;
    
    wrapper.appendChild(checkbox);
    wrapper.appendChild(label);
    container.appendChild(wrapper);
  }
  
  // 将生成的内容挂载到页面指定容器（示例容器id为layer-container）
  document.getElementById('layer-container').appendChild(container);
}

// 遍历所有Feature生成对应复选框组
layer_group_list.features.forEach(feature => {
  buildLayerCheckboxes(feature);
});

3. 关键注意事项 #

• 彻底放弃feature.properties.length，JS对象本身没有这个属性，无法以此获取属性数量
• 两种统计方法按需选择：数据规整时用方法一效率更高，数据可能存在缺失时用方法二更可靠
• 给每个复选框设置唯一id并配对对应label，提升用户操作体验（点击文字也能选中复选框）

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