如何正确将data-fields属性中的对象数据存入数组？当前存入后显示为[object Object]

兄弟，你遇到的这个[object Object]问题其实很常见——因为HTML的data属性只能存储字符串类型的数据，你直接把f.name_fields这个对象塞进去，JavaScript会自动把它转成默认的字符串表示[object Object]，所以后面取出来存到数组里自然就是这个结果啦。

下面分两步帮你解决这个问题：

第一步：存数据时把对象转成JSON字符串 #

在你生成HTML的模板里，给data-fields赋值的时候，别直接放对象，用JSON.stringify()把对象转成标准的JSON字符串，这样data属性才能正确存储对象的完整信息：

${actionFields.map((f) => {
  return `
    <optgroup label="${f.name}: Group-${f.group}">
      <option class="subtitle" id="inputValue" value="${f.script}" 
        data-fields="${JSON.stringify(f.name_fields)}" 
        data-name="${f.name}" 
        data-group="${f.group}">
        ${f.name}: ${f.script}
      </option>
    </optgroup>
    <hr />`;
}).join("")}

修改后data-fields里存的就是{"name":"require","password":"require","lastname":"unrequire","email":"unrequire"}这种可读的JSON字符串，而不是默认的[object Object]。

第二步：取数据时把JSON字符串转回对象 #

在点击事件里获取fields的时候，用JSON.parse()把字符串转回原本的对象，这里建议加个try-catch防止数据格式异常导致报错：

modalBody.querySelector("#addActionBtn").onclick = () => {
  const select = modalBody.querySelector("#actionField");
  const selectedOption = select.options[select.selectedIndex];
  
  if (!selectedOption) return alert("Поля отсутсвуют"); // 先判断是否有选中项更稳妥

  const name = selectedOption.dataset.name;
  const group = selectedOption.dataset.group;
  const script = select.value;

  // 解析JSON字符串为对象
  let fields = {};
  try {
    fields = JSON.parse(selectedOption.dataset.fields);
  } catch (err) {
    console.error("解析fields数据出错：", err);
    return alert("数据格式错误");
  }

  if (!script) return alert("Поля отсутсвуют");
  if (!node.data.actions) node.data.actions = [];

  node.data.actions.push({
    name: name,
    group: group,
    script: script,
    fields: fields,
  });
};

这样处理后，存到数组里的fields就是原本的对象了，最终的结果会是：

[
  {
    "name": "Alert",
    "group": "Form",
    "script": "alert();",
    "fields": {
      "name": "require",
      "password": "require",
      "lastname": "unrequire",
      "email": "unrequire"
    }
  }
]

内容来源于stack exchange