Finding value inside of a data attribute

Question

Hopefully I explain this correctly.

So what I have is a data-attribute which contains a lot of data, in this instance I want to find each individual basket product ID and spit them out as separate strings.

The main thing I am struggling with is how to actually find this amongst the other data that is present

Here is the markup I am working with:

<div class="hidden js-page-context" data-page-context="{
    &quot;basketProductIds&quot;: &quot;FZZ83047-157-16,FZZ84695-173-20&quot;,
    &quot;basketLastModified&quot;: &quot;Mon Aug 12 12:06:43 GMT 2019&quot;,
    &quot;redirectUrl&quot;: &quot;https://www.test.com&quot;
}"></div>

var test = $('.hidden').attr("data-page-context");

console.log(test);

CodePen: https://codepen.io/nickelse/pen/JgxmBb

Any help would be awesome :D

*will return the string "123"* — No, it won't. And I can't see why you think it might, `123` doesn't appear anywhere in the HTML. — Quentin, Aug 12 '19 at 12:32
I think you're missing my original point, ignore that comment because this is just getting everything inside of the data attribute, my question is, can I target or find specific values in side of the data-attribute, so to find the basket product IDs and spit that out rather than everything inside of it. — Nick Else, Aug 12 '19 at 12:38
"I think you're missing my original point" — It helps when you ask a clear question in the first place. So are you asking how to parse JSON? — Quentin, Aug 12 '19 at 12:40
Duplicate: https://stackoverflow.com/questions/4935632/parse-json-in-javascript — Quentin, Aug 12 '19 at 12:40
Possible duplicate of [How to convert HTML data attribute to JSON in JQuery?](https://stackoverflow.com/questions/39787480/how-to-convert-html-data-attribute-to-json-in-jquery) — Heretic Monkey, Aug 12 '19 at 13:07

Ulysse BN · Answer 1 · 2019-08-12T12:40:28.220

1

You could use JQuery.data() to target data-* html elements:

const test = $('.hidden').data("page-context")

console.log(test)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hidden js-page-context" data-page-context="{
    &quot;basketProductIds&quot;: &quot;FZZ83047-157-16,FZZ84695-173-20&quot;,
    &quot;basketLastModified&quot;: &quot;Mon Aug 12 12:06:43 GMT 2019&quot;,
    &quot;redirectUrl&quot;: &quot;https://www.test.com&quot;
}"></div>

This will give you an object, and you can access it's attributes quite easily. For instance, test.basketProductIds will give the corresponding data.

edited Aug 12 '19 at 12:40

answered Aug 12 '19 at 12:32

Ulysse BN

10,116
7
54
82

They could … but that doesn't get them the `123` they seem to be looking for – Quentin Aug 12 '19 at 12:34
What makes you think that the OP doesn't know how to extract data from an attribute? `.attr("WHOLE_ATTRIBUTE")` also would return the same right? – Krishna Prashatt Aug 12 '19 at 12:34
1

@KrishnaPrashatt — they are using `.attr("data-*")`, which will give an unparsed string. My interpretation of the question was that they wanted to use the given data, as an object. And that is what `.data()` offers. @Quentin — The question is quite unclear, maybe my answer should be a comment, let's see if they edit further. – Ulysse BN Aug 12 '19 at 12:37
1

@UlysseBN, Your interpretation was correct after all. So +1 for this since it reduces a step. – Krishna Prashatt Aug 12 '19 at 12:43

Nico · Answer 2 · 2019-08-12T12:54:37.517

I think the best way to resolve your problems it's first of all, transform your string you have with :

var test = $('.hidden').attr("data-page-context");

use JSON.parse(test), to transform it in adequate JSON.

EDIT : as mentioned in other anwsers and comments : You can skip this part by using :

var item= $('.hidden').data("page-context");

After to get all individual id:

  var ids = item.basketProductIds.split(",");

to get an array of ids.

Check my snippet below.

var test = $('.hidden').attr("data-page-context"); 

var item = JSON.parse(test);
console.log(item); 

console.log("ids", item.basketProductIds);

var ids = item.basketProductIds.split(",");
console.log(ids);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hidden js-page-context" data-page-context="{
    &quot;basketProductIds&quot;: &quot;FZZ83047-157-16,FZZ84695-173-20&quot;,
    &quot;basketLastModified&quot;: &quot;Mon Aug 12 12:06:43 GMT 2019&quot;,
    &quot;redirectUrl&quot;: &quot;https://www.test.com&quot;
}"></div>

You can avoid the `JSON.parse` step using JQuery's `.data`, see [my answer below](https://stackoverflow.com/a/57461286/6320039). — Ulysse BN, Aug 12 '19 at 12:42
`$(".hidden").data("page-context")` will return the parsed data - no need to use JSON.parse — mplungjan, Aug 12 '19 at 12:50

score 0 · Accepted Answer · answered Aug 12 '19 at 12:35

0

This works

var test = $('.hidden').attr("data-page-context"); // will return the JSON
let testObj = JSON.parse(test);
console.log(testObj.basketProductIds); // The id you need

answered Aug 12 '19 at 12:35

Надиль Каримов

335
1
6

I'll give this a go :) – Nick Else Aug 12 '19 at 12:38
Genius! It worked, I'll accept this one. – Nick Else Aug 12 '19 at 12:39
`$(".hidden").data("page-context")` will return the parsed data - no need to use JSON.parse – mplungjan Aug 12 '19 at 12:49
no need for `JSON.parse` as by using `jQuery`'s `data` method an object will be returned and ready to be used. – ThS Aug 12 '19 at 12:53

mplungjan · Answer 4 · 2019-08-12T13:00:49.367

Perhaps you meant this?

$(...).data("page-context") will return the parsed data - no need to use JSON.parse

The code below will find all divs with class js-page-context and return a list of all basketProductIds found in any of them

var list = $('.js-page-context').map(
  (_,div) => $(div).data("page-context").basketProductIds.split(",")
).get()

console.log(list);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hidden js-page-context" data-page-context="{
    &quot;basketProductIds&quot;: &quot;FZZ83047-157-16,FZZ84695-173-20&quot;,
    &quot;basketLastModified&quot;: &quot;Mon Aug 12 12:06:43 GMT 2019&quot;,
    &quot;redirectUrl&quot;: &quot;https://www.test.com&quot;
}"></div>
<div class="hidden js-page-context" data-page-context="{
    &quot;basketProductIds&quot;: &quot;FZZ83047-157-17,FZZ84695-173-21&quot;,
    &quot;basketLastModified&quot;: &quot;Mon Aug 12 12:06:43 GMT 2019&quot;,
    &quot;redirectUrl&quot;: &quot;https://www.test.com&quot;
}"></div>

Finding value inside of a data attribute

4 Answers4