Access javascript object properties containing keywords?

Question

I want to access the javascript object property with a keyword in it:

        var cloneIndex = $(".clonedInput").length + 1;

        $(document).on("click", 'button.clone', function (e) {
            e.preventDefault();
            $(this).closest(".clonedInput").clone().insertAfter(".clonedInput:last").attr("id",
                    "clonedInput" + cloneIndex).find("[id], [name] ,[data-valmsg-for]").each(
                    function () {
                        this.id = this.id.replace(/\d+$/, cloneIndex);
                        this.name = this.name.replace(/\d/, cloneIndex);
                        this.data-valmsg-for = this.data-valmsg-for.replace(/\d/, cloneIndex);
                    });
            cloneIndex++;
        });

But because of the line:

this.data-valmsg-for = this.data-valmsg-for.replace(/\d/, cloneIndex);

That has:

 this.data-valmsg-for

It throws an error because "for" in data-valmsg-for is a keyword. Also when I changed:

 this.data-valmsg-for

To:

this['data-valmsg-for'] = this['data-valmsg-for'].replace(/\d/, cloneIndex);

Script throws this error:

Uncaught TypeError: Cannot read property 'replace' of undefined

Also when I changed:

 this.data-valmsg-for

To:

this.setAttribute('data-valmsg-for',this.getAttribute('data-valmsg-for').replace(/\d/, cloneIndex));

Script throws this error:

Uncaught TypeError: Cannot read property 'replace' of null

And this is my html:

<div id="clonedInput1" class="form-group clonedInput">
            <input id="CompanyId1" name="[0].CompanyId" type="hidden" value="">

            <label class="control-label col-md-2" for="NationalCode">کد ملی</label>
            <div class="col-md-3">
                <input class="form-control text-box single-line" data-val="true" data-val-regex="فرمت کد ملی صحیح نمی باشد" data-val-regex-pattern="^[0-9]{10}$" @*data-val-remote="'کد ملی' is invalid." data-val-remote-additionalfields="*.NationalCode,*.initialNationalCode" data-val-remote-url="/Account/IsValidNationalCode"*@ data-val-required="وارد کردن کد ملی اجباریست" id="NationalCode1" name="[0].NationalCode" type="text" value="">
                <span class="field-validation-valid text-danger" data-valmsg-for="[0].NationalCode" data-valmsg-replace="true"></span>
            </div>

            <label class="control-label col-md-2" for="BirthDate">BirthDate</label>
            <div class="col-md-3">
                <input class="form-control text-box single-line" data-val="true" data-val-date="The field BirthDate must be a date." data-val-required="The BirthDate field is required." id="BirthDate1" name="[0].BirthDate" type="date" value="">
                <span class="field-validation-valid text-danger" data-valmsg-for="[0].BirthDate" data-valmsg-replace="true"></span>
            </div>

</div>

You do have to use the `[ ]` notation, and you have to check to see whether the properties exist. — Pointy, Feb 03 '16 at 05:56
The problem is not the `for`. The problem is primarily the `-`. `this.data-valmsg-for` means `this.data` *minus* `valmsg` *minus* `for`. *"Cannot read property 'replace' of undefined"* means that the property doesn't exist. If the property was just `for`, then `this.for` would work perfectly fine. — Felix Kling, Feb 03 '16 at 06:01
Given that `this` is a DOM element, you are looking for `this.getAttribute('data-valmsg-for')`. — Felix Kling, Feb 03 '16 at 06:04
This is erratically marked as a duplicate by Felix. The OP clearly says that he still has got an error when using [] notation. The so called duplicate only address the issue of [] notation. — Charlie, Feb 03 '16 at 06:04
I doubt `data-valmsg-for` is a property on your elements. It's probably am attribute in which case you should use `this.getAttribute( 'data-valmsg-for' );` or `$( this ).attr( 'data-valmsg-for' )` — Paul, Feb 03 '16 at 06:05
Duplicate of [Get data attribute](http://stackoverflow.com/q/23592030/218196). — Felix Kling, Feb 03 '16 at 06:08

score 0 · Accepted Answer · answered Feb 03 '16 at 06:12

0

It throws an error because "for" in data-valmsg-for is a keyword.

No, it throws an error because you are subtracting for from valmsg from this.data. this.data-valmsg-for is interpreted as this.data - valmsg - for.

It seems the problem you are trying to solve is updating the data property of a DOM element. There are multiple ways to do this. The most basic one is to read the attribute with getAttribute and set it with setAttribute:

this.setAttribute(
  'data-valmsg-for',
  this.getAttribute('data-valmsg-for').replace(/\d/, cloneIndex)
);

answered Feb 03 '16 at 06:12

Felix Kling

795,719
175
1,089
1,143

Or rather, use [`this.dataset.valmsgFor`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset) :-) – Bergi Feb 03 '16 at 06:14
1

Those fancy new APIs.... – Felix Kling Feb 03 '16 at 06:15
Script throws this error:Script Uncaught TypeError: Cannot read property 'replace' of null – Hamed Feb 03 '16 at 06:30
@HamedAz If `getAttribute` returns `null`, then the element doesn't have such an attribute. Since you are selecting elements that either have an `id` attribute *or* a `name` attribute *or* a `data-valmsg-for` attribute, you have to check for every attribute / property, whether it exists or not before you are trying to do something with the value. – Felix Kling Feb 03 '16 at 06:35
You're right. Thanks – Hamed Feb 03 '16 at 06:58

Access javascript object properties containing keywords?

1 Answers1