Passing multiple pieces of data to a JQuery object

Question

As outlined in this question and answer, JQuery objects can be created with attributes in place. For instance:

jQuery('<div/>', {
    id: 'foo',
    href: 'http://google.com',
    title: 'Become a Googler',
    rel: 'external',
    text: 'Go to Google!'
}).appendTo('#mySelector');

As a part of this, one can add the data field, so that you have:

jQuery('<div/>', {
    id: 'foo',
    data: ('meta', 'my-meta-data'),
    href: 'http://google.com',
    title: 'Become a Googler',
    rel: 'external',
    text: 'Go to Google!'
}).appendTo('#mySelector');

which will create the data field data-meta='my-meta-data' within the div 'foo'.

Now, if I have an object

var my_data = {
    meta1: 'my-meta-data-1',
    meta2: 'my-meta-data-2'
}

how would I go about using that object in the data field when creating my JQuery object? It would great if I could just say

jQuery('<div/>', {
    id: 'foo',
    data: my_data,
    href: 'http://google.com',
    title: 'Become a Googler',
    rel: 'external',
    text: 'Go to Google!'
}).appendTo('#mySelector');

but that would be too easy.

NOTE: I though the data: (key, value) worked but I have been trying it and it does not appear to be. My question, despite that, still stands.

You can do that. What makes you think you can't? (Your first example with setting the "data" property fails because you're using parentheses instead of `{ }` for the object literal.) — Pointy, Jun 19 '13 at 16:39
`data: ('meta', 'my-meta-data')` is wrong. `data: {data1: 'mydata1', ...}` is the right way to do > http://jsfiddle.net/5yZsg/ <. Which means, `data: my_data` should work fine.. You could have tried it by yourself before writing it up all here. — Selvakumar Arumugam, Jun 19 '13 at 16:43
I think he just needs {} instead of () and comma -> comma (as @Vega mentions below) — Lee Meador, Jun 19 '13 at 16:46
@LeeMeador And removing the comma and adding a colon may be.. It should be an object. — Selvakumar Arumugam, Jun 19 '13 at 16:47
For various reasons, I was expecting an data-(data field name) to be added to the actual html. That was an incorrect notion. Thank you for the responses, passing the object does in fact work. — user2502003, Jun 19 '13 at 16:58

Lee Meador · Accepted Answer · 2013-06-19T16:51:36.940

1

Try this:

jQuery('<div/>', {
    id: 'foo',
    data: { "my_data": my_data},
    href: 'http://google.com',
    title: 'Become a Googler',
    rel: 'external',
    text: 'Go to Google!'
}).appendTo('#mySelector');

var m1 = $("div").data("my_data").meta1;

Adapted the fiddle from @Vega. FIDDLE (Note: The original fiddle without the "/1" works too if you like that method better.)

edited Jun 19 '13 at 16:51

answered Jun 19 '13 at 16:46

Lee Meador

12,829
2
36
42

1

The comma should be a colon (`:`). – Pointy Jun 19 '13 at 16:50
@Pointy Duh. Thanks. Got it in the fiddle. Didn't copy right. – Lee Meador Jun 19 '13 at 16:52

Michael Geary · Answer 2 · 2013-06-19T17:04:08.497

One of your questions was why this didn't work:

data: ('meta', 'my-meta-data'),

You are using the comma operator in the ('meta', 'my-meta-data') expression. The comma operator evaluates both its arguments - in this case 'meta' and 'my-meta-data' and then discards the first one, returning the second.

Given that both these arguments are string constants, evaluating the first one does nothing, and so you are left with the equivalent of:

data: ('my-meta-data'),

or simply:

data: 'my-meta-data',

And that as you know is not what is needed here.

You can experiment with these expressions in the Chrome (or other browser) developer console. Here's the comma expression:

> ('meta', 'my-meta-data')
  "my-meta-data"

So if we try the object literal:

> { 'meta': 'my-meta-data' }
  SyntaxError: Unexpected token :

Oops, that doesn't work because of a quirk in JavaScript parsing: an object literal by itself won't be recognized as an expression. We need parentheses around it (which in most cases wouldn't be needed where object literals are used in real code):

> ({ 'meta': 'my-meta-data' })
  Object {meta: "my-meta-data"}

Passing multiple pieces of data to a JQuery object

2 Answers2