JavaScript · API · Intermediate

Orders

5 tasks

Place orders from your cart and inspect your order history.

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

Order flow and endpoints

#
Placing an order is a two-step process: fill the cart, then POST to `/api/orders/` with a phone number. The cart is automatically cleared after the order is placed. ``` POST /api/orders/ Place an order from the current cart GET /api/orders/ List all your past orders (paginated) GET /api/orders/{id}/ Get details of one order ``` All order endpoints require Authorization. POST `/api/orders/` body: ```javascript { phone_number: "+1234567890" } ``` Order response: ```javascript { id: 5, created_timestamp: "2025-06-23T10:15:00Z", phone_number: "+1234567890", status: "Processing", items: [ { id: 5, name: "Oak Chair", price: "149.99", quantity: 2 } ] } ``` Note: order items are flat — each has `name`, `price`, and `quantity` directly (not nested under `product`). The `price` captures the value at time of purchase.

Placing and retrieving orders

#
Full flow — add products, place order, view history: ```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', }; // Add two products to cart const products = await fetch(`${BASE_URL}/api/products/`).then(r => r.json()); for (const p of products.results.slice(0, 2)) { await fetch(`${BASE_URL}/api/cart/items/`, { method: 'POST', headers, body: JSON.stringify({ product_slug: p.slug, quantity: 1 }), }); } // Place the order const order = await fetch(`${BASE_URL}/api/orders/`, { method: 'POST', headers, body: JSON.stringify({ phone_number: '+1234567890' }), }).then(r => r.json()); console.log('Order id:', order.id); console.log('Status:', order.status); console.log('Items:', order.items.length); // List all orders const history = await fetch(`${BASE_URL}/api/orders/`, { headers }).then(r => r.json()); console.log('Total orders:', history.count); // Get order detail const detail = await fetch(`${BASE_URL}/api/orders/${order.id}/`, { headers }).then(r => r.json()); for (const item of detail.items) { console.log(`${item.name} x${item.quantity} @ ${item.price}`); } } main(); ```

Order endpoints reference

#
**Endpoints (all require Authorization)** ``` POST /api/orders/ Place order from current cart body: { phone_number: string } returns: 201 + order object error: 400 if cart is empty GET /api/orders/ List all orders (paginated) returns: { count, next, previous, results: [...] } GET /api/orders/{id}/ Order detail returns: full order object with items ``` **Order object fields** ``` id number Order id created_timestamp string ISO 8601 timestamp phone_number string Phone number provided at checkout status string e.g. "Processing" items array Order items ``` **Order item object (flat — no product nesting)** ``` id number Item id name string Product name at time of purchase price string Price at time of purchase quantity number Quantity ordered ``` **Calculate total spend** ```javascript const total = orders.reduce((sum, order) => sum + order.items.reduce((s, item) => s + parseFloat(item.price) * item.quantity, 0 ), 0 ); ```

Exercises:

01

Place an order

#

Add at least one product to the cart, then POST to `/api/orders/` with a phone number. Print the order `id` and `status`.

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

async function main() {
  // 1. authenticate
  // 2. add a product to cart
  // 3. POST /api/orders/ and print id + status
}

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 slug = await fetch(`${BASE_URL}/api/products/`).then(r => r.json())
    .then(d => d.results[0].slug);

  await fetch(`${BASE_URL}/api/cart/items/`, {
    method: 'POST', headers,
    body: JSON.stringify({ product_slug: slug, quantity: 1 }),
  });

  const order = await fetch(`${BASE_URL}/api/orders/`, {
    method: 'POST', headers,
    body: JSON.stringify({ phone_number: '+1234567890' }),
  }).then(r => r.json());

  console.log(order.id);
  console.log(order.status);
}

main();
02

List orders

#

Fetch your order history from GET `/api/orders/`. Print the total count and each order's `id` and `status`.

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

async function main() {
  // GET /api/orders/ and print count + each order's id and status
}

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}` };
  const data = await fetch(`${BASE_URL}/api/orders/`, { headers }).then(r => r.json());

  console.log(`${data.count} orders`);
  for (const order of data.results) {
    console.log(`#${order.id} — ${order.status}`);
  }
}

main();
03

Order details

#

Place an order, then fetch its details from GET `/api/orders/{id}/`. Print the `name`, `quantity`, and `price` for each item.

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

async function main() {
  // place an order then fetch its detail
  // print each item's name, quantity, price
}

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 products = await fetch(`${BASE_URL}/api/products/`).then(r => r.json());
  for (const p of products.results.slice(0, 2)) {
    await fetch(`${BASE_URL}/api/cart/items/`, {
      method: 'POST', headers,
      body: JSON.stringify({ product_slug: p.slug, quantity: 1 }),
    });
  }

  const order = await fetch(`${BASE_URL}/api/orders/`, {
    method: 'POST', headers,
    body: JSON.stringify({ phone_number: '+1234567890' }),
  }).then(r => r.json());

  const detail = await fetch(`${BASE_URL}/api/orders/${order.id}/`, { headers }).then(r => r.json());
  for (const item of detail.items) {
    console.log(item.name, item.quantity, item.price);
  }
}

main();
04

Full order flow

#

In one script: authenticate, add 3 products to the cart, place an order, confirm it appears in the order list. Print the order id and item count.

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

async function main() {
  // full flow: auth → 3 products → order → confirm in list
}

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 products = await fetch(`${BASE_URL}/api/products/`).then(r => r.json());
  for (const p of products.results.slice(0, 3)) {
    await fetch(`${BASE_URL}/api/cart/items/`, {
      method: 'POST', headers,
      body: JSON.stringify({ product_slug: p.slug, quantity: 1 }),
    });
  }

  const order = await fetch(`${BASE_URL}/api/orders/`, {
    method: 'POST', headers,
    body: JSON.stringify({ phone_number: '+1234567890' }),
  }).then(r => r.json());

  const history = await fetch(`${BASE_URL}/api/orders/`, { headers }).then(r => r.json());
  const ids = history.results.map(o => o.id);

  console.log(`Order ${order.id} in list: ${ids.includes(order.id)}`);
  console.log(`Items: ${order.items.length}`);
}

main();
05

Calculate total spend

#

Place two separate orders (add products → order → add more → order). Then fetch all orders and calculate the total spend across all items. Print the total.

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

async function main() {
  // place 2 orders, then sum all item prices
}

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 products = await fetch(`${BASE_URL}/api/products/`).then(r => r.json());

  // First order
  await fetch(`${BASE_URL}/api/cart/items/`, {
    method: 'POST', headers,
    body: JSON.stringify({ product_slug: products.results[0].slug, quantity: 1 }),
  });
  await fetch(`${BASE_URL}/api/orders/`, {
    method: 'POST', headers,
    body: JSON.stringify({ phone_number: '+1234567890' }),
  });

  // Second order
  await fetch(`${BASE_URL}/api/cart/items/`, {
    method: 'POST', headers,
    body: JSON.stringify({ product_slug: products.results[1].slug, quantity: 2 }),
  });
  await fetch(`${BASE_URL}/api/orders/`, {
    method: 'POST', headers,
    body: JSON.stringify({ phone_number: '+1234567890' }),
  });

  const allOrders = await fetch(`${BASE_URL}/api/orders/`, { headers }).then(r => r.json());
  const totalSpend = allOrders.results.reduce((sum, order) =>
    sum + order.items.reduce((s, item) =>
      s + parseFloat(item.price) * item.quantity, 0
    ), 0
  );
  console.log(`Total spend: ${totalSpend.toFixed(2)}`);
}

main();