JavaScript · API · Intermediate

User Profile

5 tasks

Read and update a user profile with GET, PATCH, and PUT requests.

Quick topic start and explanations before exercises (exercises below):

GET, PATCH, and PUT — when to use each

#
All three methods use the same endpoint `/api/users/profile/`, all require Authorization: ``` GET /api/users/profile/ Read the current profile PATCH /api/users/profile/ Partial update — only sent fields change PUT /api/users/profile/ Full replacement — all fields required ``` Profile fields: ```javascript { id: 1, username: "alice42", email: "[email protected]", first_name: "Alice", last_name: "Smith", phone_number: "+1234567890", image: null } ``` **PATCH** — surgical update. Send only what you want to change: ```javascript // Only first_name changes — everything else stays intact await fetch(`${BASE_URL}/api/users/profile/`, { method: 'PATCH', headers, body: JSON.stringify({ first_name: 'Alicia' }), }).then(r => r.json()); ``` **PUT** — full replacement. You must send every field or omitted ones get cleared: ```javascript // Must include all fields await fetch(`${BASE_URL}/api/users/profile/`, { method: 'PUT', headers, body: JSON.stringify({ username: 'alice42', email: '[email protected]', first_name: 'Alicia', last_name: 'Smith', phone_number: '+1234567890', }), }); ``` Use PATCH for most updates — it's safer because it doesn't touch fields you didn't send.

Reading and updating the profile

#
Read profile, PATCH one field, verify, then PUT all fields: ```javascript const BASE_URL = 'https://apilearn.tukas.dev'; async function main() { const { token } = await fetch(`${BASE_URL}/api/auth/token/`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ username: 'YOUR_USERNAME', password: 'YOUR_PASSWORD' }), }).then(r => r.json()); const headers = { 'Authorization': `Token ${token}`, 'Content-Type': 'application/json', }; const PROFILE_URL = `${BASE_URL}/api/users/profile/`; // Read current profile const profile = await fetch(PROFILE_URL, { headers }).then(r => r.json()); console.log('Name:', profile.first_name); console.log('Email:', profile.email); // PATCH — change only first_name const patched = await fetch(PROFILE_URL, { method: 'PATCH', headers, body: JSON.stringify({ first_name: 'Alicia' }), }).then(r => r.json()); console.log('New name:', patched.first_name); // Alicia console.log('Email unchanged:', patched.email); // still the same // PUT — replace all fields const updated = await fetch(PROFILE_URL, { method: 'PUT', headers, body: JSON.stringify({ username: profile.username, email: '[email protected]', first_name: 'Alicia', last_name: profile.last_name || '', phone_number: profile.phone_number || '', }), }).then(r => r.json()); console.log('After PUT email:', updated.email); } main(); ``` Reusable update helper: ```javascript async function updateProfile(headers, fields) { return fetch(`${BASE_URL}/api/users/profile/`, { method: 'PATCH', headers, body: JSON.stringify(fields), }).then(r => r.json()); } const result = await updateProfile(headers, { first_name: 'Bob', phone_number: '+9998887777' }); console.log(result.first_name); ```

Profile endpoint reference

#
**Endpoint** ``` GET /api/users/profile/ Read profile → 200 + profile object PATCH /api/users/profile/ Partial update → 200 + updated profile PUT /api/users/profile/ Full replace → 200 + updated profile ``` **Profile fields** ``` id number Immutable user id username string Login name (unique) email string first_name string last_name string phone_number string Format: +1234567890 image string URL or null ``` **PATCH vs PUT** ``` PATCH Send only changed fields Safe — other fields untouched PUT Send all fields Missing fields get cleared ``` **Safe PUT pattern — read first, then send all** ```javascript const current = await fetch(PROFILE_URL, { headers }).then(r => r.json()); await fetch(PROFILE_URL, { method: 'PUT', headers, body: JSON.stringify({ ...current, email: '[email protected]' }), }); ```

Exercises:

01

Read the profile

#

Authenticate and GET `/api/users/profile/`. Print `username` and `email`.

const BASE_URL = 'https://apilearn.tukas.dev';

async function main() {
  // GET /api/users/profile/ and print username and email
}

main();
Solution 
const BASE_URL = 'https://apilearn.tukas.dev';

async function main() {
  const { token } = await fetch(`${BASE_URL}/api/auth/token/`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ username: 'YOUR_USERNAME', password: 'YOUR_PASSWORD' }),
  }).then(r => r.json());

  const profile = await fetch(`${BASE_URL}/api/users/profile/`, {
    headers: { 'Authorization': `Token ${token}` },
  }).then(r => r.json());

  console.log(profile.username);
  console.log(profile.email);
}

main();
02

Update name with PATCH

#

Read the current profile, then update `first_name` with PATCH. Print the new `first_name` and confirm `email` is unchanged.

const BASE_URL = 'https://apilearn.tukas.dev';

async function main() {
  // 1. authenticate
  // 2. read profile
  // 3. PATCH first_name
  // 4. print new first_name and confirm email unchanged
}

main();
Solution 
const BASE_URL = 'https://apilearn.tukas.dev';

async function main() {
  const { token } = await fetch(`${BASE_URL}/api/auth/token/`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ username: 'YOUR_USERNAME', password: 'YOUR_PASSWORD' }),
  }).then(r => r.json());

  const headers = {
    'Authorization': `Token ${token}`,
    'Content-Type': 'application/json',
  };
  const PROFILE_URL = `${BASE_URL}/api/users/profile/`;

  const before = await fetch(PROFILE_URL, { headers }).then(r => r.json());
  console.log('Before:', before.first_name);

  const after = await fetch(PROFILE_URL, {
    method: 'PATCH', headers,
    body: JSON.stringify({ first_name: 'Updated' }),
  }).then(r => r.json());

  console.log('After:', after.first_name);
  console.log('Email unchanged:', after.email === before.email);
}

main();
03

Update multiple fields at once

#

PATCH `first_name`, `last_name`, and `phone_number` in a single request. Print all three updated values.

const BASE_URL = 'https://apilearn.tukas.dev';

async function main() {
  // PATCH 3 fields at once
}

main();
Solution 
const BASE_URL = 'https://apilearn.tukas.dev';

async function main() {
  const { token } = await fetch(`${BASE_URL}/api/auth/token/`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ username: 'YOUR_USERNAME', password: 'YOUR_PASSWORD' }),
  }).then(r => r.json());

  const headers = {
    'Authorization': `Token ${token}`,
    'Content-Type': 'application/json',
  };

  const updated = await fetch(`${BASE_URL}/api/users/profile/`, {
    method: 'PATCH', headers,
    body: JSON.stringify({
      first_name: 'Test',
      last_name: 'User',
      phone_number: '+1112223333',
    }),
  }).then(r => r.json());

  console.log(updated.first_name);
  console.log(updated.last_name);
  console.log(updated.phone_number);
}

main();
04

Full replacement with PUT

#

Read the current profile, then send a PUT with all fields but change `email`. Print the updated email to confirm.

const BASE_URL = 'https://apilearn.tukas.dev';

async function main() {
  // PUT requires all fields — read first!
}

main();
Solution 
const BASE_URL = 'https://apilearn.tukas.dev';

async function main() {
  const { token } = await fetch(`${BASE_URL}/api/auth/token/`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ username: 'YOUR_USERNAME', password: 'YOUR_PASSWORD' }),
  }).then(r => r.json());

  const headers = {
    'Authorization': `Token ${token}`,
    'Content-Type': 'application/json',
  };
  const PROFILE_URL = `${BASE_URL}/api/users/profile/`;

  const current = await fetch(PROFILE_URL, { headers }).then(r => r.json());

  const updated = await fetch(PROFILE_URL, {
    method: 'PUT', headers,
    body: JSON.stringify({
      username: current.username,
      email: '[email protected]',
      first_name: current.first_name || '',
      last_name: current.last_name || '',
      phone_number: current.phone_number || '',
    }),
  }).then(r => r.json());

  console.log(updated.email);
}

main();
05

Reusable updateProfile() function

#

Write an `updateProfile(headers, fields)` async function that PATCHes the profile and returns the result. Call it twice with different fields.

const BASE_URL = 'https://apilearn.tukas.dev';

async function updateProfile(headers, fields) {
  // PATCH /api/users/profile/ with fields, return result
}

async function main() {
  const { token } = await fetch(`${BASE_URL}/api/auth/token/`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ username: 'YOUR_USERNAME', password: 'YOUR_PASSWORD' }),
  }).then(r => r.json());

  const headers = {
    'Authorization': `Token ${token}`,
    'Content-Type': 'application/json',
  };

  // call updateProfile twice with different fields
}

main();
Solution 
const BASE_URL = 'https://apilearn.tukas.dev';

async function updateProfile(headers, fields) {
  return fetch(`${BASE_URL}/api/users/profile/`, {
    method: 'PATCH',
    headers,
    body: JSON.stringify(fields),
  }).then(r => r.json());
}

async function main() {
  const { token } = await fetch(`${BASE_URL}/api/auth/token/`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ username: 'YOUR_USERNAME', password: 'YOUR_PASSWORD' }),
  }).then(r => r.json());

  const headers = {
    'Authorization': `Token ${token}`,
    'Content-Type': 'application/json',
  };

  const r1 = await updateProfile(headers, { first_name: 'Test' });
  console.log(r1.first_name);

  const r2 = await updateProfile(headers, { phone_number: '+9998887777' });
  console.log(r2.phone_number);
}

main();