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
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
From this
<div id="myelem" myattr="[{ title: 'hello', author: 'mike'}, { title: 'world', author: 'hellen'}, {...}]"/>
Get the attribute value
1. Javascript
var attr = document.getElementById('myelem').getAttribute('myattr')
2. JQuery
var attr = $('.myelem').attr('myelem')
String to JSON
var obj = JSON.parse(attr)
As you tagged your question Polymer - this works for Polymer-elements :
<polymer-element object-attribute='{"alt":"json", "q":"chrome"}'>
Source : https://elements.polymer-project.org/elements/iron-ajax
Tried it for a custom element, it worked as well - unfortunately it does not work for default html-elements (e.g. divs). So maybe defining a custom-element for this might be a solution for you. Otherwise use the answers above ;)
