CODEWITHSUNDEEP
javascriptjqueryhtml
Mikkel Fennefoss
Mikkel Fennefoss

Reputation: 909

Getting specific part of a data-attribute on hover

I am having a div with a data-attribute which has several double quotes inside it, so the information is therefore not escaped, but it is necessary to do it this way in my project.

I am trying to get the "jj-storefront-hero-rethinking-denim" value when i hover on the div.

<div class="test" data-layer-promotion-view="{"row_type":"row-type-3-dynamic-smart","row_id":"home-page-row-01-widget","column_id":1,"id":"jj-storefront-hero-rethinking-denim","name":null,"creative":"/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw871109fc/jackjones/store-assets/w09/smart-widget/hero/rethinking_denim-dk.jpg"}"></div>

This is the jQuery which i wrote:

$( ".test" ).hover(function() {
  var contentAsset = $(this).attr("data-layer-promotion-view");
  console.log(contentAsset)
});

Is there some way to select a certain set of double quotes inside a data-attribute?

See codePen here: http://codepen.io/fennefoss/pen/evMLww?editors=1111

Upvotes: 0

Views: 2121

Answers (4)

Ionut Necula
Ionut Necula

Reputation: 11472

You can add single quotes instead of double quotes arround the attribute data-layer-promotion-view value to correctly escape it and then use JSON.parse() to parse the string into an object, no need to change attr() to data():

$(".test").hover(function() {
  var contentAsset = JSON.parse($(this).attr("data-layer-promotion-view"));
  console.log(contentAsset.id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test" data-layer-promotion-view='{"row_type":"row-type-3-dynamic-smart","row_id":"home-page-row-01-widget","column_id":1,"id":"jj-storefront-hero-rethinking-denim","name":null,"creative":"/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw871109fc/jackjones/store-assets/w09/smart-widget/hero/rethinking_denim-dk.jpg"}'>test</div>

Upvotes: 0

Sumon Sarker
Sumon Sarker

Reputation: 2795

$( ".test" ).hover(function() {
  var contentAsset = $(this).attr("data-layer-promotion-view");
  console.log(contentAsset);
});
.test {
  width: 500px;
  min-height: 100px;
  padding:10px;
  background: red;
}
.test:hover:after {
  content: attr(data-layer-promotion-view);
  width: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="test" data-layer-promotion-view='{"row_type":"row-type-3-dynamic-smart","row_id":"home-page-row-01-widget","column_id":1,"id":"jj-storefront-hero-rethinking-denim","name":null,"creative":"/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw871109fc/jackjones/store-assets/w09/smart-widget/hero/rethinking_denim-dk.jpg"}'>

Note : There is an error for using ". View your page source code in Browser, You will understand the error for declaring HTML attribute. Your attribute string is invalid for using "

Upvotes: 0

Satpal
Satpal

Reputation: 133403

Use combination of ' and " quotes, then you can use .data(key) to retrieve it.

When the data attribute is an object (starts with '{') or array (starts with '[') then jQuery.parseJSON is used to parse the string; it must follow valid JSON syntax including quoted property names. If the value isn't parseable as a JavaScript value, it is left as a string. 

var data = $('.test').data('layer-promotion-view');
console.log(data.row_type);
console.log(data);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test" data-layer-promotion-view='{"row_type":"row-type-3-dynamic-smart","row_id":"home-page-row-01-widget","column_id":1,"id":"jj-storefront-hero-rethinking-denim","name":null,"creative":"/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw871109fc/jackjones/store-assets/w09/smart-widget/hero/rethinking_denim-dk.jpg"}'></div>

Upvotes: 4

diavolic
diavolic

Reputation: 722

Just use single quote, when defining attribute

<div class="test" data-layer-promotion-view='{"row_type":"row-type-3-dynamic-smart","row_id":"home-page-row-01-widget","column_id":1,"id":"jj-storefront-hero-rethinking-denim","name":null,"creative":"/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw871109fc/jackjones/store-assets/w09/smart-widget/hero/rethinking_denim-dk.jpg"}'>

</div>

Upvotes: 0

Related Questions