HTML value store list of dictionary

Question

I am trying to loop through an array of objects stored in the value-media attribute of my button.

I'm able to get data from value-media and show it, but I can't loop through this data - it treats it like one long string (I'm guessing) and showing "undefined"

var medias = [button.getAttribute('value-media')]
console.log(medias)

$.each(medias, function(index, value) {
  alert(value.id);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<button type="submit" id="editUserBtn" class="btn btn-link" data-bs-toggle="modal" data-bs-target="#editUser" value-userid="34" value-username="CUSTOMER1_TEST2" value-media="[{'id': '50', 'name': 'CUSTOMER1_Windows Notification', 'sendto': ['[email protected]', '[email protected]']}, {'id': '51', 'name': 'CUSTOMER1_ALL', 'sendto': ['[email protected]', '[email protected]']}]">
  <img src="/static/images/settings_black_24dp.svg" title="Edit user"/>
</button>

Could you help me to make it working? I need to go throught this data and for each dictionary in list take ID :(

Answer 1

Thank you! It's working now. Here is the solution:

var medias = $(button).data('media')
var mediasJSON = JSON.parse(medias.replace(/\'/g, "\""))
    $.each(mediasJSON, function(index, value) {
        alert(value.name + value.id)
      });