在＆lt; div＆gt;发送一个对象纯JavaScript中的数据集

Question

我正在尝试在DIV数据集中获取一个完整的对象，并在JavaScript中检索它。

这是我的代码的样子：

<div id="test"></div>

<script>
  var config = {
    "user-id": "test001",
    "approach": true,
    "product-id": "testproduct1"
  }

  var x = document.createElement('iframe');
  x.setAttribute("id", "wrapper");
  x.setAttribute("srcdoc", '<script src="test.js"><\/script><div data-config="' + config + '" id="myid"></div>');
  document.getElementById('test').appendChild(x);
</script>

这是在JavaScript文件中，我想从Data-config获取数据，

const info = document.querySelector('#myid').dataset.data-config;

但是，我获得[Object Object]也尝试了以下操作，并获得相同的结果

var test = document.getElementById('myid').getAttribute("data-config");

来发送正常数据属性正在工作很好：

<div data-approach ='+ config.approach+' id="myid"></div>

var test = document.getElementById('myid').getAttribute("data-approach");

什么结果是我的控制台中的true。

如何发送完整的配置，以便我不需要一个一个一个拆开？

Answer 1

与json.stringify（）设置。

let data = {} // any referance data;

const info = document.querySelector('#myid').dataset.config = 
JSON.stringify(data);

使用json.parse（）获取数据。

let data = JSON.parse(document.querySelector('#myid').dataset.config)