Table of contents

1. Problems

1. I need to add an attribute test in the dom element to store an object array temp, so that when I find this dom element next time, I can directly get the data in the attribute to render the page.

2. To store objects and arrays on the dom attribute, JSON.stringify(arr) must be converted to a string before they can be stored.

3. After the storage is over, I use JSON.parse( dom.getAttribute('attribute name')) to get and parse the data I saved, but it keeps reporting errors

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

The general meaning is that it is not JSON data and cannot be parsed! There is no way to print the data before the parse, it turned out to be like this [{, but there is nothing wrong with it on the dom, it is indeed saved , why, only the first two [{ are left after printing Woolen cloth? ? ? ? ? ? @--@

1) Code

    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)

2. Problems and solutions

1. I thought there was a problem with the way I got the attribute, and I tried the jq method, but there was still a problem, and I still got [{

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

2. My God, what the hell is going on? I don't know! ! ! ! !

After a period of time, I suddenly changed the code and changed test="${temp}" to test='${temp}', which is amazing! ! ! ! ! !

My goodness, it turns out that it is because of single and double quotes, please use single quotes to store objects or array variables in string templates.

3. After testing: there is nothing wrong with using double quotation marks for ordinary strings, and they can be retrieved normally after saving.

code:

    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')) //lyl
    console.log("temp",dom.getAttribute('test')) //[{
    console.log("获取存储的temp数据",JSON.parse(dom.getAttribute('test')))
   },3000)

3. Summary

1. When storing objects or arrays in the dom, JSON.parse will report an error or only get part of the stored data [{,[,{, you need to check whether the single and double quotes are used correctly when you directly store attributes in the dom ! Be sure to use single quotes .

2. After testing, both single and double quotes are acceptable for ordinary strings; single quotes must be used for JSON strings, so it is recommended to use single quotes as much as possible in string templates.

3. Fortuitous encounter, I really don’t know how to solve the problem, but it is indeed solved. It’s really interesting. I hope this kind of wisdom will be more, so that I don’t need to think hard all day long about how to solve the problem^-^

/*

Hope it helps you!

If there is any mistake, welcome to correct me, thank you very much!

*/

Store the object or array on the attribute of the dom element, and finally the complete data cannot be obtained, only [{

1. Problems

2. Problems and solutions

3. Summary

Guess you like