Accessing a value from a jQuery object created from .data()

Question

I've got several HTML elements with various data-attributes. I'm trying to use jQuery to store all of the data attributes for a particular element when it's clicked, then insert one of the values from that Object into another element as text. I've tried various approaches I've seen on SO, and I think I'm properly storing the data, but I can't figure out a straightforward way to pull out a particular data-attribute value so I can insert it in the #display element. The HTML:

<span class="source" data-spanName="spanOne" data-spanPosition="first">Span One</span>
<span class="source" data-spanName="spanTwo" data-spanPosition="second">Span Two</span>
<span class="source" data-spanName="spanThree" data-spanPosition="third">Span Three</span>

<span id="display">display attribute here</span>

The jQuery I've tried:

Attempt 1 (returns [object Object]):

$('.source').click(function () {
    var rowData = $( this ).data();
    $('#display').text( rowData ); //returns [object Object]
});

Attempt 2 (returns undefined):

$('.source').click(function () {
    var rowData = $( this ).data();
    $('#display').text( $.rowData[0].spanname ); //returns undefined
});

Attempt 3 (displays all data, but as a string):

$('.source').click(function () {
    var rowData = $( this ).data();
    var prettyRowData = JSON.stringify( rowData );
    $('#display').text( prettyRowData ); //returns attributes, but as a string and I'd have to parse it to pull out a value 
});

Desired end result:

<span id="display">spanOne</span>

Why did you try [0] when you clearly aren't storing any kind of array? — Kevin B, Jul 09 '14 at 20:16
you simply need to do rowdata., as suggested in the documentation. — Kevin B, Jul 09 '14 at 20:18
I think part of my confusion was from reading the docs for `jQuery.data()` rather than `.data()` — Marcatectura, Jul 09 '14 at 20:27

score 3 · Accepted Answer · edited May 23 '17 at 11:50

The naming conventions for data attributes are explained pretty well here

But your second attempt seems really close. However, you're accessing an object as if it's an Array, so you'll need to try a different way to access it:

$('.source').click(function () {
    var rowData = $( this ).data();

    // proper way to get the data
    var spanName = rowData.spanname;
    $('#display').text( spanName ); 

});

score 1 · Answer 2 · answered Jul 09 '14 at 20:21

1

Try this:

name = $(this).attr('data-spanName');
pos = $(this).attr('data-spanPosition');

answered Jul 09 '14 at 20:21

Cloud_Ratha

588
1
6
14

score 0 · Answer 3 · answered Jul 09 '14 at 20:28

0

$('.source').click(function(){
    var text = $(this).data('spanName');
    $('#display').text(text);
});

answered Jul 09 '14 at 20:28

Adrian Covaci

103
8

Accessing a value from a jQuery object created from .data()

3 Answers3