如何将HTML按钮传递的键值对值转换为可访问的JavaScript数组

核心思路 #

后端渲染的{{data}}需要是转义后的合法JSON字符串，前端通过JSON.parse()将其转换为JavaScript可直接操作的数组/对象，再根据需求调整为目标数组格式。

步骤1：确保HTML中渲染的是合法转义的JSON #

修改HTML按钮的value属性，确保后端输出的JSON已经转义（避免HTML属性的双引号冲突）：

<!-- 推荐用单引号包裹value，减少转义问题；后端需将data转为JSON字符串并转义特殊字符 -->
<button value='{{data | json_encode | escape}}' id="generate-btn" name="generate-btn">Generate</button>

备注：不同后端框架的转义方法不同，比如PHP用htmlspecialchars(json_encode($data))，Python Flask用{{ data | tojson | safe }}，核心是保证输出到HTML的是符合规范的JSON字符串。

步骤2：JavaScript中解析并转换为目标数组 #

修改JS代码，解析字符串并转为所需数组格式：

document.getElementById("generate-btn").addEventListener("click", function() {
  console.log("generate button clicked");
  const rawData = this.value; // 用this直接获取当前按钮的value，无需重复查询DOM
  
  try {
    // 解析JSON字符串为JS对象/数组
    const parsedData = JSON.parse(rawData);
    
    // 处理两种情况：
    // 情况1：如果原始数据已经是数组，直接使用
    // 情况2：如果是单个键值对对象，转为包含该对象的数组（可根据你的目标格式调整）
    const targetArray = Array.isArray(parsedData) ? parsedData : [parsedData];
    
    // 现在可以直接操作数组了
    console.log("转换后的数组：", targetArray);
    // 示例：访问数组第一个元素的属性
    if (targetArray.length > 0) {
      console.log("第一个元素的内容：", targetArray[0]);
    }
  } catch (err) {
    // 捕获解析错误，方便排查问题
    console.error("数据解析失败：", err);
    console.log("原始数据内容：", rawData);
  }
});

特殊需求：转为键值对二维数组 #

如果你的目标格式是[["键1", "值1"], ["键2", "值2"]]这种二维数组，可将解析后的对象用Object.entries()转换：

// 假设parsedData是单个键值对对象，比如{name: "test", age: 20}
const keyValueArray = Object.entries(parsedData);
console.log(keyValueArray); // 输出：[["name", "test"], ["age", 20]]

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