Passing Attributes / objects through an attribute. Javascript

Question

Is there a way to pass an array or object through an attribute? like:

<div id="myelem" myattr="{ title: 'hello', author: 'mike'}, { title: 'world', author: 'hellen'}, {...}"/>

I just tried this using javascript, but only the first object are being returned, i would like to have something like this:

for(let i=0; i<this.myattr.length; i++){
  console.log(this.myattr.title);
}

Any ideas? Thankyou

Solution

You will have to* use JSON.parse() and your string will have to be in a valid JSON-Format.

var element = document.getElementById('myelem')
var attributeContent = element.getAttribute('data-myattr')
var object = JSON.parse(attributeContent)

<div id="myelem" data-myattr='[{ "title": "hello", "author": "mike" }, { "title": "world", "author": "hellen" }]' />

*You could also do var object = eval(attributeContent) without the need of a JSON-String. But have a look at "Why is using the JavaScript eval function a bad idea?"

---

Finally I'd like to suggest to use the <script> tag instead of a attribute to pass JavaScript-Objects via your HTML-Code:

<script>
    var myStuff = [{ title: 'hello', author: 'mike' }, { title: 'world', author: 'hellen' }, {}];
</script>

You will then be able to access myStuff in your JavaScript-Code