I need value from a named node map

Question

I am going through an html structure to get a value I need. It appears to be a "NamedNodeMap" and I have gotten as far as this call:

ui.handle.attributes.getNamedItem("data-value")

which when printed in chromes console shows this:

data-value="12:00 AM"
    ->"12:00 AM"

I need to get the "12:00 AM" as a value, string, anything will work. I just dont know how to get it. .value on the end of my call does not work, i also tried .text and many other things.

Heres what the ui object looks like before i expand handle and attributes:

enter image description here

and then after:

html markup

html markup:

enter image description here

what is your HTML mark up? could you add that to the question? — Toni Leigh, Jun 15 '15 at 16:25
OK, you need to take the handle value and try wrapping that in a $ call, then call data on that, — Toni Leigh, Jun 15 '15 at 16:33
you could maybe try getting the HTML mark-up from the elements tab in the inspector — Toni Leigh, Jun 15 '15 at 16:47
btw, you can copy that as text and paste it into the question, that makes much easier for us as we can then copy and paste it for analysis, plus, I can hardly read that and I am lucky with my eyes — Toni Leigh, Jun 15 '15 at 16:58

score 24 · Answer 1 · answered Jun 15 '15 at 16:37

24

.attributes appears to be a "NamedNodeMap" and I have gotten as far as calling .attributes.getNamedItem("data-value")

.attributes is a NamedNodeMap of Attribute nodes, which is a pretty deprecated interface. If you really want to use this, the .value, .nodeValue and .textContent properties of the attribute node should yield the text value you're after:

ui.handle.attributes.getNamedItem("data-value").value // "12:00 AM"

However, the standard approach would be to just use the getAttribute method of your element:

ui.handle.getAttribute("data-value") // "12:00 AM"

With HTML5, there is even the .dataset DOMStringMap specifically designed to access data attributes:

ui.handle.dataset["value"] // "12:00 AM"

answered Jun 15 '15 at 16:37

Bergi

630,263
148
957
1,375

@connormoore: then that's the current value of your attribute. What else are you expecting? – Bergi Jun 15 '15 at 16:45
I'd say if both jquery and javascript options give you a string of '03:00AM' and you're expecting to see '12:00AM' then something is wrong before we get to this stage - i.e. the `data-value` attribute is set wrong on the element – Toni Leigh Jun 15 '15 at 16:45
@connormoore: It seems you (or a plugin or something else) are changing the value. You'll have to get it at the right time. – Bergi Jun 15 '15 at 16:46
Looking at the pictures above you can see the value I am trying to get is under the object, under handle, under attributues, under data-value and is seen as nodeValue, textContent, and value. These are literally console.log calls 1 after another. – connor moore Jun 15 '15 at 16:46
@connormoore: Yes, but you're not [expanding the logged object](http://stackoverflow.com/q/23392111/1048572) ("under handle under attributes under data-value") right after that. Something has changed the value between the time you logged it and the time you are inspecting your object. – Bergi Jun 15 '15 at 16:48
Im not sure what you mean by im not expanding the logged object? The object im logging is the ui object. which you can see the values being 12:00 AM, and then my $(ui.handle).data('value') is right after giving me 3:00 AM, if i do a setTimeout and delay it its still 3:00 AM. – connor moore Jun 15 '15 at 16:51
@connormoore: You're only logging an object, not its contents. The content is `3:00 AM` at the time of logging. The content might change, and if you look at the contents of the logged object later you'll see the current values not the contents at the time of logging. Please read the question I've linked. – Bergi Jun 15 '15 at 17:01
I can make the call on the slider handle at anytime and .data("value") on it gives me "3:00 AM". I am not getting the value I need. I need the nodeValue of 12:00 AM in the above example. My question is how do i get that value. – connor moore Jun 16 '15 at 13:09
Try to paste the code in the console where/when the object shows 12:00 AM and it should yield that same value. Otherwise, please show us your whole code, including the bits that initialise the value with 3 and then set it to 12. – Bergi Jun 16 '15 at 15:11

Toni Leigh · Answer 2 · 2015-06-15T16:27:58.603

4

As you're using jQuery, there's a very simple way to get data-* attributes:

$('element').data('key');

So in your case, you'd need to find the ID of the element you are targeting and call:

$('#ID').data('value');

If ui.handle is a jquery object that represents a single node the you can do:

ui.handle.data('value');

Or if it's a javascript DOM node, then you'll need to wrap it in a $ call:

$(ui.handle).data('value');

edited Jun 15 '15 at 16:27

answered Jun 15 '15 at 16:27

Toni Leigh

4,830
3
22
36

`$(ui.handle)` will suffice. – Bergi Jun 15 '15 at 16:27
$(ui.handle).data('value') is giving me 3:00 AM – connor moore Jun 15 '15 at 16:35
really need to see the HTML mark up here, the data() function is what you need, but to give a precise answer I need to see the HTML. – Toni Leigh Jun 15 '15 at 16:36
I added that above? Do you need more? – connor moore Jun 15 '15 at 16:36
that's not HTML, it's an screen-shot of the javascript inspector, the HTML is the mark-up that renders the page, where the `` in that the inspector output implies you using – Toni Leigh Jun 15 '15 at 16:37
This ui.handle object is coming from jquerys ui slider. within the start function of the API you get an event and ui. what I show above from chromes console is the ui that im printing to the console. All I can see when i inspect element on the page, as far as html goes is this: `code`

`code` – connor moore Jun 15 '15 at 16:38
if it's a jquery object then the `data()` function will work, which it is in fact as it's returning the string '03:00AM' - are you sure the element you're referencing has '12:00AM' and not '03:00AM'? – Toni Leigh Jun 15 '15 at 16:41
Yes, the object you see above is the ui object coming through the function – connor moore Jun 15 '15 at 16:44

score 1 · Answer 3 · answered Mar 15 '22 at 13:19

Element.attributes returns a NamedNodeMap of attributes of that HTMLElement which is mildly a JavaScript Map. Hence supposing

<span id="mySpan" name="test" message="test2"></span>

you can create an object from the NamedNodeMap like below:

const el = document.querySelector('#mySpan')
const attrs = Object.fromEntries(Array.from(el.attributes).map(item => [item.name, item.value]))

and then access an individual attribute by the dot notation for object properties:

console.log(attrs.name) // "test"
console.log(attrs.messsage) // "test2"

I need value from a named node map

3 Answers3

Linked