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

score 5 · Accepted Answer · edited May 23 '17 at 12:15

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

A. Gille · Answer 2 · 2015-12-07T15:21:41.920

0

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)

edited Dec 07 '15 at 15:21

answered Dec 07 '15 at 12:20

A. Gille

912
6
23

score 0 · Answer 3 · answered Dec 07 '15 at 15:43

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 ;)

Passing Attributes / objects through an attribute. Javascript

3 Answers3