Update data object with jquery

Question

I am trying to update 'id' and 'selected' within data-options.

HTML:

<span class="re_highlight-feature" data-toggle="tooltip" data-animation="false" data-placement="top" title="" data-options="{'id':0,'name':'Appliance','value':'Dryer','selected':false}" data-original-title="Highlight Dryer">Dryer</span>

I am able to reference them and pass the correct values to my AJAX function.

JS:

$('.re_highlight-feature').click(function(e) {

            e.preventDefault();
            var feature = $(this);
            var featureDislay = feature.text();
            var featureData = feature.data('options');

            feature.html('<i class="fa fa-refresh fa-spin fa-fw"></i><span class="sr-only">Loading...</span>');

            $.ajax({
                type:"POST",
                url: "/wp-admin/admin-ajax.php",
                data: {action:'highlightFeature', id:featureData.id, name:featureData.name, value:featureData.value, selected:featureData.selected},
                success:function(json){

                    obj = JSON && JSON.parse(json) || $.parseJSON(json);
                    var recordID = obj.id;

                    if (recordID == 0){
                        featureData['id'] = 0;
                        featureData['selected'] = false;
                    } else {
                        featureData['id'] = recordID;
                        featureData['selected'] = true;
                    }

                    feature.html(featureDislay);
                    feature.toggleClass('mark');

                },
                error: function(errorThrown){
                    alert(errorThrown);
                }
            });

            return false;
        });

Everything works except this:

if (recordID == 0){
                    featureData['id'] = 0;
                    featureData['selected'] = false;
                } else {
                    featureData['id'] = recordID;
                    featureData['selected'] = true;
                }

I haven't been able to figure out how to update those values within my original element.

If you do console.log( typeof featureData ) I'll bet you good money you'd get string and not object. If you want jQuery to parse it for you, it has to be valid JSON, and that means doublequotes — adeneo
– adeneo, Commented Jul 15, 2017 at 18:24
Then you're unique, as it shouldn't be parsed as an object when it's not valid JSON. — adeneo
– adeneo, Commented Jul 15, 2017 at 18:29
My apologies. You are correct. I inadvertently replaced the double quotes with single ticks when copying my example. — Ira Monko
– Ira Monko, Commented Jul 16, 2017 at 0:29

guest271314 · Accepted Answer · 2017-07-15 18:58:39Z

Note that properties of data-* at HTML should have properties surrounded by double quotes to set data-* attribute value as valid JSON within HTML document.

data-options='{"id":0,"name":"Appliance","value":"Dryer","selected":false}'

for ability to define a JavaScript object at

var featureData = JSON.parse(feature[0].dataset.options);

If you are trying to update the actual HTML you can use HTMLElement.dataset, JSON.stringify(), JSON.parse()

if (recordID == 0) {

     featureData.id = 0;
     featureData.selected = false
     feature[0].dataset.options = JSON.stringify(featureData);

} else {

     featureData.id = recordID;
     featureData.selected = true;
     feature[0].dataset.options = JSON.stringify(featureData);

}

Inspecting .re_highlight-feature at DevTools or Developer Tools reveals that the data-* attribute is updated at the HTML document.

var feature = document.querySelector(".re_highlight-feature");

var featureData = JSON.parse(feature.dataset.options);

console.log(featureData);

featureData.id = 1;
featureData.selected = true
feature.dataset.options = JSON.stringify(featureData);

console.log(JSON.parse(feature.dataset.options));

console.log(feature.outerHTML);

<span class="re_highlight-feature" data-toggle="tooltip" data-animation="false" data-placement="top" title="" data-options='{"id":0,"name":"Appliance","value":"Dryer","selected":false}' data-original-title="Highlight Dryer">Dryer</span>

shreyas tigdi · Accepted Answer · 2017-07-15 18:30:34Z

0

Your code is updating the data object created with the reference of the element. Updates are made to the object and not the actual element. To update the element attributes use following code after you set values in featureData.

feature.attr("data-options",JSON.stringify(featureData));

answered Jul 15, 2017 at 18:30

shreyas tigdi

733 bronze badges

Collectives™ on Stack Overflow

Update data object with jquery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related