当前位置：首页 > news >正文

将对象或数组存在 dom元素的属性上，最后取不到完整数据，只取到 [{

news 2025/8/5 15:42:21

一、问题

二、问题及解决方法

三、总结

一、问题

1.我需要在dom元素里面添加了一个属性test存一个对象数组temp，以便我下一次找到这个dom元素时可以直接拿到属性里面的数据来渲染页面。

2.dom 属性上存对象和数组，必须先JSON.stringify(arr),转换成字符串才可以存储。

3.存储完了之后我就用JSON.parse( dom.getAttribute('属性名称'))来获取并解析我存的数据，但是吧，一直报错

VM360956:1 Uncaught SyntaxError: Expected property name or '}' in JSON at position 1
at JSON.parse (<anonymous>)

大体意思就是不是JSON数据，不能解析！没办法打印了一下没有parse前的数据，竟然是这样的[{,但是在dom上看着也没有毛病呀，确实是存了呀，为什么呀，打印出来只剩下这个前面两个[{ 了呢？？？？？？ @--@

1）代码

    let temp = JSON.stringify([{ color: 'red' },{color:'green'}])options.content = `
<div><div id="${categoryKey}" class="feng-image-textMarker"  test="${temp}" ></div>
</div>`let markDom = new fengmap.FMDomMarker(options)console.log({ markDom })markDom.addTo(this.floor)setTimeout(()=>{let dom=document.getElementById('0');console.log("temp",dom.getAttribute('test'))console.log("获取存储的temp数据",JSON.parse(dom.getAttribute('test')))},3000)

二、问题及解决方法

1.我还以为自己获取属性的方式有问题，还试了一下jq的获取方法，还是有问题，取到的还是[{

    let dom=document.getElementById('0');console.log("temp",$(dom).attr('test'))

2.天哪，到底是怎么回事呢？不晓得呀！！！！！

一段时间后，突然改了一下代码把 test="${temp}"改成了 test='${temp}',竟然神奇的好了！！！！！！

我的天哪，原来是因为单双引号，在字符串模板中存对象或者是数组变量请使用单引号呀。

3. 经过测试：普通的字符串使用双引号是没有毛病的，存完之后可以正常获取到。

代码：

    let temp = JSON.stringify([{ color: 'red' },{color:'green'}])options.content = `
<div><div id="${categoryKey}" class="feng-image-textMarker"  test="${temp}" test2="lyl" ></div>
</div>`let markDom = new fengmap.FMDomMarker(options)console.log({ markDom })markDom.addTo(this.floor)setTimeout(()=>{let dom=document.getElementById('0');console.log("temp",dom.getAttribute('test2')) //lylconsole.log("temp",dom.getAttribute('test')) //[{console.log("获取存储的temp数据",JSON.parse(dom.getAttribute('test')))},3000)