<p>I wager this is the problem:</p>
<pre class="lang-javascript prettyprint-override"><code>var fields = [];
fields['nickname'] = 'Nickname';
</code></pre>
<p>JavaScript doesn't have associative arrays like PHP. The fact that this works at all is only a quirk in JavaScript – Arrays are objects, so you can assign properties to them. So you're adding a <code>fields.nickname</code> property, but that's not part of the array. So jQuery can't really pick up the property, as the array itself is still empty.</p>
<p>Use an object instead, then it should work:</p>
<pre class="lang-javascript prettyprint-override"><code>const fields = {
    nickname: 'Nickname',
};
</code></pre>
<p>If you need to add properties dynamically:</p>
<pre class="lang-javascript prettyprint-override"><code>const fields = {};
fields.nickname = 'Nickname';

// for element fields, use an array of IDs
fields.category = [42, 50]
</code></pre>
<p>To debug a problem like this, open up the <a href="https://firefox-source-docs.mozilla.org/devtools-user/network_monitor/index.html" rel="nofollow noreferrer">Network tab</a> in your browser's devtools. There you can see and inspect the payload for the AJAX request. Check the request payload to see if you data is actually getting transmitted.</p>

CC BY-SA 4.0
2024-02-06T11:47:02.783Z
This worked! But now I need to add something to the object (example of HTML `field[category][]`), how would I do that?
J1989
CC BY-SA 4.0
2024-02-06T13:11:12.993Z
@J1989 I've added an example snippet to the answer. Also check out https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects
MoritzLost
CC BY-SA 4.0
2024-02-06T11:37:36.433Z
2024-02-06T13:09:35.683Z
2024-02-06T13:09:35.683Z
MoritzLost
<p>I am using an Ajax (POST) request to update the current user profile.
So far I can successfully update the user fields (like <code>fullName</code>) but I cannot seem to update custom fields.</p>
<p>I have tried adding the custom fields within the <code>fields</code> array (just like when using an HTML form), but this doesn't seem to work.</p>
<p>Below my code:</p>
<pre><code>$('.js-update-profile').click(function() {
    var id = $(this).data('id');
    var fields = [];
    fields['nickname'] = 'Nickname';
    const params = {
        CRAFT_CSRF_TOKEN: csrfTokenValue,
        userId: player.id,
        fields: fields,
    };
    $.ajax({
        url: '/actions/users/save-user',
        type: 'POST',
        data: params,
        headers: {
            'Accept': 'application/json',
            'X-Requested-With': 'XMLHttpRequest',
        },
        dataType: 'json',
        success: function (params) {
            console.log(params);
        }
    });
});
</code></pre>
<p>When I excute this code I'm getting a successfull message <code>User saved</code>, but the custom fields are not updated.</p>
<p>Am I doing something wrong with setting up the params?</p>

<users><ajax><jquery>
Saving custom fields of user with Ajax request
# Saving custom fields of user with Ajax request

(Asked by: username_0 on 2024-02-06)

I am using an Ajax (POST) request to update the current user profile.
So far I can successfully update the user fields (like fullName) but I cannot seem to update custom fields.
I have tried adding the custom fields within the fields array (just like when using an HTML form), but this doesn't seem to work.
Below my code:
$('.js-update-profile').click(function() {
    var id = $(this).data('id');
    var fields = [];
    fields['nickname'] = 'Nickname';
    const params = {
        CRAFT_CSRF_TOKEN: csrfTokenValue,
        userId: player.id,
        fields: fields,
    };
    $.ajax({
        url: '/actions/users/save-user',
        type: 'POST',
        data: params,
        headers: {
            'Accept': 'application/json',
            'X-Requested-With': 'XMLHttpRequest',
        },
        dataType: 'json',
        success: function (params) {
            console.log(params);
        }
    });
});

When I excute this code I'm getting a successfull message User saved, but the custom fields are not updated.
Am I doing something wrong with setting up the params?

**Tags:** users, ajax, jquery

---

## 1 answers

### Answer by username_1 on 2024-02-06. Score: 2 | Accepted answer

I wager this is the problem:
var fields = [];
fields['nickname'] = 'Nickname';

JavaScript doesn't have associative arrays like PHP. The fact that this works at all is only a quirk in JavaScript – Arrays are objects, so you can assign properties to them. So you're adding a fields.nickname property, but that's not part of the array. So jQuery can't really pick up the property, as the array itself is still empty.
Use an object instead, then it should work:
const fields = {
    nickname: 'Nickname',
};

If you need to add properties dynamically:
const fields = {};
fields.nickname = 'Nickname';

// for element fields, use an array of IDs
fields.category = [42, 50]

To debug a problem like this, open up the Network tab in your browser's devtools. There you can see and inspect the payload for the AJAX request. Check the request payload to see if you data is actually getting transmitted.

> **Comments:**
> **username_0**: This worked! But now I need to add something to the object (example of HTML `field[category][]`), how would I do that?  
> **username_1**: @J1989 I've added an example snippet to the answer. Also check out https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects  

---

