fullstack.org.ua

Фільтрування та сортування · fullstack.org.ua

Середній15 хв· Fullstack Team

Фільтрування та сортування

Реалізуєте фільтрування й сортування колекцій через безпечні та передбачувані параметри запиту.

Навіщо потрібні параметри фільтрування та сортування

Колекції зазвичай не варто повертати клієнту в довільному порядку та без можливості вибрати потрібні елементи. Параметри запиту дають змогу описати, які дані потрібні клієнту:

text

GET /products?category=books&minPrice=200&sort=price&order=asc

У цьому запиті:

category=books — фільтрує товари за категорією;
minPrice=200 — залишає товари з ціною від 200;
sort=price — визначає поле сортування;
order=asc — визначає напрямок сортування.

Параметри запиту є зовнішніми даними, тому їх не можна безпосередньо використовувати як назви властивостей або умови сортування. Сервер має:

javascript

const filteredProducts = products.filter((product) => {
  const matchesCategory =
    !category || product.category === category;

  const matchesMinPrice =
    minPrice === null || product.price >= minPrice;

  const matchesMaxPrice =
    maxPrice === null || product.price <= maxPrice;

  return matchesCategory && matchesMinPrice && matchesMaxPrice;
});

javascript

const http = require('node:http');

const products = [
  { id: 1, name: 'JavaScript для початківців', category: 'books', price: 450, rating: 4.8 },
  { id: 2, name: 'Механічна клавіатура', category: 'devices', price: 2200, rating: 4.5 },
  { id: 3, name: 'Node.js у прикладах', category: 'books', price: 700, rating: 4.9 },
  { id: 4, name: 'USB-мікрофон', category: 'devices', price: 1800, rating: 4.2 },
  { id: 5, name: 'Блокнот розробника', category: 'stationery', price: 180, rating: 4.1 }
];

const allowedParameters = new Set([
  'q',
  'category',
  'minPrice',
  'maxPrice',
  'sort',
  'order'
]);

const sortableFields = new Set(['price', 'rating', 'name']);

function parseOptionalNumber(value, parameterName) {
  if (value === null || value === '') {
    return null;
  }

  const number = Number(value);

  if (!Number.isFinite(number) || number < 0) {
    throw new Error(
      `Параметр "${parameterName}" має бути невід'ємним числом`
    );
  }

  return number;
}

function readQueryParameters(requestUrl) {
  for (const parameterName of requestUrl.searchParams.keys()) {
    if (!allowedParameters.has(parameterName)) {
      throw new Error(`Невідомий параметр "${parameterName}"`);
    }

    if (requestUrl.searchParams.getAll(parameterName).length > 1) {
      throw new Error(
        `Параметр "${parameterName}" не можна передавати більше одного разу`
      );
    }
  }

  const query = requestUrl.searchParams.get('q') ?? '';
  const category = requestUrl.searchParams.get('category') ?? '';
  const sort = requestUrl.searchParams.get('sort') ?? 'id';
  const order = requestUrl.searchParams.get('order') ?? 'asc';

  if (query.length > 100) {
    throw new Error('Параметр "q" не може містити більше 100 символів');
  }

  if (!sortableFields.has(sort) && sort !== 'id') {
    throw new Error(
      'Параметр "sort" може мати значення: id, price, rating або name'
    );
  }

  if (order !== 'asc' && order !== 'desc') {
    throw new Error('Параметр "order" може мати значення asc або desc');
  }

  const minPrice = parseOptionalNumber(
    requestUrl.searchParams.get('minPrice'),
    'minPrice'
  );

  const maxPrice = parseOptionalNumber(
    requestUrl.searchParams.get('maxPrice'),
    'maxPrice'
  );

  if (minPrice !== null && maxPrice !== null && minPrice > maxPrice) {
    throw new Error('Параметр "minPrice" не може бути більшим за "maxPrice"');
  }

  return {
    query: query.toLowerCase(),
    category,
    minPrice,
    maxPrice,
    sort,
    order
  };
}

function compareValues(first, second) {
  if (first < second) {
    return -1;
  }

  if (first > second) {
    return 1;
  }

  return 0;
}

function getSortedProducts(parameters) {
  const filteredProducts = products.filter((product) => {
    const matchesQuery =
      parameters.query === '' ||
      product.name.toLowerCase().includes(parameters.query);

    const matchesCategory =
      parameters.category === '' ||
      product.category === parameters.category;

    const matchesMinPrice =
      parameters.minPrice === null ||
      product.price >= parameters.minPrice;

    const matchesMaxPrice =
      parameters.maxPrice === null ||
      product.price <= parameters.maxPrice;

    return (
      matchesQuery &&
      matchesCategory &&
      matchesMinPrice &&
      matchesMaxPrice
    );
  });

  const direction = parameters.order === 'desc' ? -1 : 1;

  return [...filteredProducts].sort((first, second) => {
    const firstValue = first[parameters.sort];
    const secondValue = second[parameters.sort];

    const primaryResult = compareValues(firstValue, secondValue);

    if (primaryResult !== 0) {
      return primaryResult * direction;
    }

    // Додаткове поле робить результат стабільним для однакових значень.
    return first.id - second.id;
  });
}

function sendJson(response, statusCode, data) {
  response.writeHead(statusCode, {
    'Content-Type': 'application/json; charset=utf-8'
  });

  response.end(JSON.stringify(data));
}

const server = http.createServer((request, response) => {
  const requestUrl = new URL(
    request.url,
    `http://${request.headers.host || 'localhost'}`
  );

  if (request.method !== 'GET' || requestUrl.pathname !== '/products') {
    sendJson(response, 404, {
      error: 'Маршрут не знайдено'
    });
    return;
  }

  try {
    const parameters = readQueryParameters(requestUrl);
    const result = getSortedProducts(parameters);

    sendJson(response, 200, {
      data: result,
      count: result.length
    });
  } catch (error) {
    sendJson(response, 400, {
      error: error.message
    });
  }
});

server.listen(3000, () => {
  console.log('Сервер запущено на http://localhost:3000');
});

javascript

const sortColumns = {
  price: 'price',
  rating: 'rating',
  name: 'name'
};

const column = sortColumns[sortParameter];

if (!column) {
  throw new Error('Недозволене поле сортування');
}