Modifying a specific value of a data attribute?

Question

How can I modify the "foo" value in the following element: ?

<div id="my-element" data-request-data="bar: 1, foo: 2">

I've tried:

$('#my-element').attr('data-request-data.foo', 5);

But it doesn't work.
Can someone help me ?

To do what you're asking is possible, but it will be ugly due to the format of the value. Is it possible to change it to JSON or separate data attributes instead? — Rory McCrossan
– Rory McCrossan, Commented Jan 26, 2021 at 15:42
Do you not have any control over the output from the CMS to the views? — Rory McCrossan
– Rory McCrossan, Commented Jan 26, 2021 at 15:51

ikiK · Accepted Answer · 2021-01-26 16:06:49Z

1

You can not directly modify parts of data attribute, but what you need is simply done with splitting value after grabbing it and setting it again modified...

let newFoo = $('#my-element').attr('data-request-data').split('foo: ');
// get data value and split it

$('#my-element').attr('data-request-data', newFoo[0] + 'foo: ' + 5)
//set new


console.log($('#my-element').attr('data-request-data'))
//cheak...

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="my-element" data-request-data="bar: 1, foo: 2">

answered Jan 26, 2021 at 16:06

ikiK

6,5095 gold badges24 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mohamed-Yousef · Accepted Answer · 2021-01-26 16:14:55Z

Ok I did it in a hard way to make a json and back to text .. I'll post it anyway it may help someone in the future

var data = $('#my-element').attr('data-request-data');
var text_to_json = convert_to_json(data);
console.log(text_to_json);
text_to_json.foo = 5;
var json_to_text = back_to_text(text_to_json);
console.log(json_to_text);
$('#my-element').attr('data-request-data' , json_to_text);


function convert_to_json(data){
  data = data.split(',');
  result = '';
  $.each(data , function(i , v){
    v = v.split(':');
    v_total = '"'+v[0].trim()+'": "'+v[1].trim()+'"';
    result += v_total+',';
  });
  return JSON.parse('{'+result.replace(/(^,)|(,$)/g, "")+'}');
}

function back_to_text(json){
  var json_txt = JSON.stringify(json);
  json_txt = json_txt.replace(/\"/g , '').replace(/(^{)|(}$)/g , '');
  return json_txt;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="my-element" data-request-data="bar: 1, foo: 2">

Collectives™ on Stack Overflow

Modifying a specific value of a data attribute?

2 Answers 2

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Related