Jquery get attribute value as it changes

Question

I have the following HTML

<div class="element" data-settings={"apples":1,"bananas":4,"speed":300}>
</div>

The values in data-settings can be changed in my app however the js code that updates the values is written in Reactjs, is minified and unreadable. I just want to get some values using simple jquery in my own js.

In my own js, when I click .element I want to get the updated value of data-settings.

My code:

$('.element').on('click', function() {
    console.log( $(".element").data("settings") );
});

It returns the data-settings values but when I update a setting and click .element again it does not return the updated values.

For example, I update apples to 8 in my app. I see data-settings={"apples":8,"bananas":4,"speed":300} in the HTML but in my console log, apples are still 1.

I also tried:

$('body').on('click', '.element', function() {
    console.log( $(".element").data("settings") );
});

and does not work.

How can I see the live changes to the data attribute settings in my js?

The code for updating settings is in Reactjs and compiled, minified. It is unreadable. — CyberJunkie, Jun 15 '19 at 11:46
@Andreas Because what I read before in https://stackoverflow.com/questions/7261619/jquery-data-vs-attr ..And the data set by `.attr()` can't catches by `.data()` and vice versa https://jsfiddle.net/Lyh46m53/1/ — Mohamed-Yousef, Jun 15 '19 at 12:19
@Andreas I'm not v.good in english to explain things well .But you can read this answer https://stackoverflow.com/a/29907463/3385827 — Mohamed-Yousef, Jun 15 '19 at 12:32
@Mohamed-Yousef you are right, `attr()` works but now i do not know how to get the values. With `data()` I used for example, `.data('settings').apples` to get apples. Using `attr()` returns `Nan` — CyberJunkie, Jun 15 '19 at 12:41
@CyberJunkie `JSON.parse($(this).attr("data-settings")).apples` — Mohamed-Yousef, Jun 15 '19 at 12:47
@Mohamed-Yousef i will mark as the right answer if you post your answer — CyberJunkie, Jun 15 '19 at 13:31
@CyberJunkie If I post an answer I will repeat/copy/paste [Travis J Answer Here](https://stackoverflow.com/a/29907463/3385827) So you can only read and vote his answer .. I'm glad that everything works for you .. Have a great day :-) — Mohamed-Yousef, Jun 15 '19 at 15:27

score 1 · Accepted Answer · answered Jun 17 '19 at 06:47

You should use both JSON.parse() and JSON.stringify() properties

$(document).on('click', '.show', function() {
  // Convert to JSON
  $settings = JSON.parse($(".element").attr("data-settings"));
  
  $settings.speed =  getRandomInt(500); // Update the value
  $settings.apples =  getRandomInt(10); // Update the value
  $settings.bananas =  getRandomInt(100); // Update the value
  
  // Convert to string
  $settings = JSON.stringify($settings);
  
  // Update in the Div
  $(".element").attr("data-settings",$settings);
  
  $('.result').append('<li>'+$settings+'</li>');
});


function getRandomInt(max) {
  return Math.floor(Math.random() * Math.floor(max) +1);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="element" data-settings={"apples":1,"bananas":4,"speed":300}>

Click the "Generate" button to Update the value in the Div. 
Here I added a function to generate random integer values. 

</div>

<button class="show">Show</button>

<ul class="result">
  <li>{"apples":1,"bananas":4,"speed":300}</li>
</ul>

Jquery get attribute value as it changes

1 Answers1