如何将服务端返回的对象数组绑定到HTML元素？

嘿，这个问题我太熟了！你遇到的是HTML属性引号冲突+JSON序列化/反序列化的典型坑，咱们一步步拆解解决：

问题根源复盘 #

你尝试把接口返回的item.Lines对象数组绑定到data-code属性时，遇到了三个核心问题：

1. 直接写data-code="${item.Lines}"：JS会把对象自动转成[Object object]，因为对象默认的toString()方法就是这个结果。
2. 使用JSON.stringify(item.Lines)：生成的JSON字符串里的双引号会和HTML属性的双引号冲突，导致属性值被提前截断（比如你看到的data-code="[{" article":"..."，第二个双引号直接结束了属性值），所以控制台只能看到部分内容。
3. 把双引号替换成单引号：JSON语法要求必须用双引号包裹键和字符串值，单引号的JSON是不合法的，所以JSON.parse会报错。

靠谱解决方案 #

方法1：用HTML实体转义JSON里的双引号 #

不用把双引号换成单引号，而是转成HTML实体"，浏览器会自动解析回双引号，同时保持JSON格式合法：

async getRequestFunction() { 
  const response = await fetch(url); 
  const data = await response.json(); 
  data.InvoiceList.forEach(item => { 
    // 将JSON中的双引号转义为HTML实体
    const linesJson = JSON.stringify(item.Lines).replace(/"/g, '"');
    table.innerHTML += `<div data-code="${linesJson}">${item.Name}</div>`; 
  })
  // 读取并解析
  const targetDiv = document.querySelector('div');
  const linesData = JSON.parse(targetDiv.getAttribute('data-code'));
  console.log(linesData);
}

方法2：用单引号包裹HTML属性值 #

HTML允许用单引号包裹属性值，这样JSON里的双引号就不会被当作属性的结束符，完全不需要修改JSON字符串：

async getRequestFunction() { 
  const response = await fetch(url); 
  const data = await response.json(); 
  data.InvoiceList.forEach(item => { 
    // 用单引号包裹data-code的属性值
    table.innerHTML += `<div data-code='${JSON.stringify(item.Lines)}'>${item.Name}</div>`; 
  })
  // 读取并解析
  const targetDiv = document.querySelector('div');
  const linesData = JSON.parse(targetDiv.getAttribute('data-code'));
  console.log(linesData);
}

方法3：用DOM API的dataset（最推荐） #

如果可以的话，别用innerHTML拼接字符串，直接用document.createElement创建元素，然后通过dataset属性绑定数据——dataset会自动处理序列化和转义，完全避免引号冲突：

async getRequestFunction() { 
  const response = await fetch(url); 
  const data = await response.json(); 
  // 用文档片段提升性能，避免频繁DOM操作
  const fragment = document.createDocumentFragment();
  
  data.InvoiceList.forEach(item => { 
    const div = document.createElement('div');
    div.textContent = item.Name;
    // 直接把序列化后的JSON赋值给dataset.code
    div.dataset.code = JSON.stringify(item.Lines);
    fragment.appendChild(div);
  })
  
  table.appendChild(fragment);
  
  // 读取并解析
  const targetDiv = document.querySelector('div');
  const linesData = JSON.parse(targetDiv.dataset.code);
  console.log(linesData);
}

这个方法不仅解决了引号问题，还提升了DOM操作的性能（避免多次修改innerHTML导致的DOM重绘），代码也更清晰。

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