Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2024-02-06T11:47:02.783Z
Answers.Text: This worked! But now I need to add something to the object (example of HTML `field[category][]`), how would I do that?
Answers.UserDisplayName: J1989
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2024-02-06T13:11:12.993Z
Answers.Text: @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
Answers.UserDisplayName: MoritzLost
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2024-02-06T11:37:36.433Z
Answers.LastActivityDate: 2024-02-06T13:09:35.683Z
Answers.LastEditDate: 2024-02-06T13:09:35.683Z
Answers.UserDisplayName: MoritzLost
Body: <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>
  
Tags: <users><ajax><jquery>
Title: Saving custom fields of user with Ajax request
ThreadText: # 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:
  
  ```javascript
  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:
  
  ```javascript
  const fields = {
      nickname: 'Nickname',
  };
  
  ```
  
  If you need to add properties dynamically:
  
  ```javascript
  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](https://firefox-source-docs.mozilla.org/devtools-user/network_monitor/index.html) 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**: @username_0 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  
  
  ---
  
  