jQuery display attribute specific values onclick

Question

Hope some genius helps a bit. I have a table with custom attribute data-attributes values like this:

HTML

<table class="myTable">    
    <tbody>
        <tr>
            <td class="attribute-name"></td>
                <td class="attribute-name">Title 1</td>
                <td class="attribute-name">Title 2</td>
        </tr>
        <tr>
            <td class="attribute-name">10</td>
                <td class="attribute-twice" data-attributes="{"attribute_1":"10","attribute_2":"Friday"}"></td>
                <td class="attribute-twice" data-attributes="{"attribute_1":"10","attribute_2":"Saturday"}"></td>
        </tr>
        <tr>
            <td class="attribute-name">20</td>
                <td class="attribute-twice" data-attributes="{"attribute_1":"20","attribute_2":"Friday"}"></td>
                <td class="attribute-twice" data-attributes="{"attribute_1":"20","attribute_2":"Saturday"}"></td>
        </tr>
    </tbody>
</table>

I need to create a function that displays on click the attribute_1 values (10 or 20) and the attribute_2 values (Friday or Saturday)

MY JS so far

$('.attribute-twice').click(function(){
    var MyVal1 = $(this).attr('SELECTOR REQUIRED FOR 10 or 20');
    var MyVal2 = $(this).attr('SELECTOR REQUIRED FOR FRIDAY or SATURDAY');

$('span.visiblevalue1').html( MyVal1 );
$('span.visiblevalue2').html( MyVal2 );

});

Not sure i'm going in the good direction. Thanks a lot for the help

Answer 1

• Use JSON.parse() to transform the 'data-attributes' string into an object. More info at https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse
• Be careful in HTML, you was using wrong quotation marks for the data-attributes. You cannot put data-attributes="attribute_1:"10"" as you are using two times ". You should do it like data-attributes='attribute_1:"10"' using ' and ".
• Is the displayVal() function necessary? I deleted it just for tests purpose.

$('.attribute-twice').click(function(){
    var dataString = $(this).attr('data-attributes');
    var dataJSON = JSON.parse(dataString);
        
    //$('span.visiblevalue1').html( dataJSON.attribute_1 );
    //$('span.visiblevalue2').html( dataJSON.attribute_2 );

    console.log(dataJSON.attribute_1);
    console.log(dataJSON.attribute_2);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<table class="myTable">    
    <tbody>
        <tr>
            <td class="attribute-name"></td>
                <td class="attribute-name">Title 1</td>
                <td class="attribute-name">Title 2</td>
        </tr>
        <tr>
            <td class="attribute-name">10</td>
                <td class="attribute-twice" data-attributes='{"attribute_1":"10","attribute_2":"Friday"}'>clickMe</td>
                <td class="attribute-twice" data-attributes='{"attribute_1":"10","attribute_2":"Saturday"}'>clickMe</td>
        </tr>
        <tr>
            <td class="attribute-name">20</td>
                <td class="attribute-twice" data-attributes='{"attribute_1":"20","attribute_2":"Friday"}'>clickMe</td>
                <td class="attribute-twice" data-attributes='{"attribute_1":"20","attribute_2":"Saturday"}'>clickMe</td>
        </tr>
    </tbody>
</table>