如何用JavaScript为每个volcdiv生成含名称、经纬度的字典？

问题背景 #

我通过JSON结合模板生成了如下DOM结构：

<div id="divholder">
  {%for i in volcanoinfo%}
    <div class="volcdiv">
      <p id="volcanoname" style="display: none;">{{ i['name'] }}</p>
      <p id="volcanolat" style="display: none;">{{ i['vlat'] }}</p>
      <p id="volcanolon" style="display: none;">{{ i['vlng'] }}</p>
    </div>
  {%endfor%}
</div>

需求是为每个.volcdiv生成一个包含Name（名称）、latitude（纬度）、longitude（经度）的字典（JavaScript对象）。我尝试了一段代码获取数据，但无法正确整理成目标结构，求解决方法。

我之前的尝试代码：

var div = document.getElementById('divholder');
var volcdiv = div.getElementsByTagName('p')
var divs = div.getElementsByTagName('div');
var divArray = [];

for (var i = 0; i < divs.length; i += 1) {
  divArray.push(volcdiv[i].innerHTML);
  console.log(divArray)
}

解决方案 #

第一步：修正DOM结构（可选但推荐） #

原模板中每个.volcdiv内的<p>使用了重复的id，这违反了HTML规范（id必须全局唯一），会导致DOM查找异常。建议将id改为class：

<div id="divholder">
  {%for i in volcanoinfo%}
    <div class="volcdiv">
      <p class="volcanoname" style="display: none;">{{ i['name'] }}</p>
      <p class="volcanolat" style="display: none;">{{ i['vlat'] }}</p>
      <p class="volcanolon" style="display: none;">{{ i['vlng'] }}</p>
    </div>
  {%endfor%}
</div>

第二步：编写JavaScript代码提取并整理数据 #

遍历每个.volcdiv，在当前div范围内提取对应数据，构建对象并加入数组：

// 获取容器元素
const divHolder = document.getElementById('divholder');
// 获取所有火山卡片div
const volcDivs = divHolder.querySelectorAll('.volcdiv');
// 存储最终字典数组
const volcanoList = [];

// 遍历每个火山卡片
volcDivs.forEach(div => {
  // 提取当前卡片内的三个数据
  const name = div.querySelector('.volcanoname').textContent.trim();
  // 纬度经度转为数字类型，方便后续使用（比如地图定位）
  const latitude = parseFloat(div.querySelector('.volcanolat').textContent.trim());
  const longitude = parseFloat(div.querySelector('.volcanolon').textContent.trim());
  
  // 构建字典并加入数组
  volcanoList.push({
    Name: name,
    latitude: latitude,
    longitude: longitude
  });
});

// 输出结果
console.log(volcanoList);

如果无法修改DOM结构（保留原重复id） #

如果因限制无法修改模板，可通过遍历每个.volcdiv的子元素来获取数据：

const divHolder = document.getElementById('divholder');
const volcDivs = divHolder.querySelectorAll('.volcdiv');
const volcanoList = [];

volcDivs.forEach(div => {
  // 获取当前div下的所有p标签
  const pTags = div.querySelectorAll('p');
  // 按顺序提取数据（注意顺序要和DOM中的一致）
  const name = pTags[0].textContent.trim();
  const latitude = parseFloat(pTags[1].textContent.trim());
  const longitude = parseFloat(pTags[2].textContent.trim());
  
  volcanoList.push({
    Name: name,
    latitude: latitude,
    longitude: longitude
  });
});

console.log(volcanoList);

代码说明 #

• 使用querySelectorAll精准获取目标元素，避免全局查找的混乱
• 在每个.volcdiv范围内查找子元素，确保数据对应正确
• 用textContent替代innerHTML，避免解析HTML带来的安全问题和冗余内容
• 将经纬度转为数字类型，便于后续的计算或地图操作

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