Hidden

Overview

Serializes an object to a URL query string format, removing null and undefined values and properly encoding special characters including spaces.

serialize(/json/);

Features

• Converts objects to URL query string format
• Automatically removes null and undefined values
• Properly encodes spaces as %20 instead of +
• Uses URLSearchParams for standard encoding
• Returns empty string for invalid inputs
• Simple and intuitive API
• No side effects - does not modify original object
• Comprehensive testing

Arguments

Arg	Type	Default Value	Required
json	any	-	Yes

Usage

Use the serialize() function to convert an object to a URL query string.

import { serialize } from '@inpulse-ui/utils';

const params = {
  name: 'John Doe',
  age: 30,
  city: 'New York'
};

const queryString = serialize(params);
console.log(queryString); // "name=John%20Doe&age=30&city=New%20York"

Automatically removes null and undefined values:

const data = {
  username: 'alice',
  email: 'alice@example.com',
  phone: null,
  address: undefined,
  active: true
};

const result = serialize(data);
console.log(result); // "username=alice&email=alice%40example.com&active=true"
// Notice phone and address are omitted

Returns empty string for invalid inputs:

console.log(serialize(null)); // ""
console.log(serialize(undefined)); // ""
console.log(serialize("string")); // ""
console.log(serialize(123)); // ""
console.log(serialize(false)); // ""

Proper space encoding:

const searchParams = {
  query: 'hello world',
  category: 'tech news',
  sort: 'date desc'
};

const encoded = serialize(searchParams);
console.log(encoded); // "query=hello%20world&category=tech%20news&sort=date%20desc"
// Spaces are encoded as %20, not +

Examples

API request preparation:

const filters = {
  status: 'active',
  minPrice: 100,
  maxPrice: 500,
  category: 'electronics',
  discount: null, // Will be removed
  featured: true
};

const queryString = serialize(filters);
const apiUrl = `https://api.example.com/products?${queryString}`;

console.log(apiUrl);
// "https://api.example.com/products?status=active&minPrice=100&maxPrice=500&category=electronics&featured=true"

Form data serialization:

const formData = {
  firstName: 'Jane',
  lastName: 'Smith',
  email: 'jane.smith@email.com',
  newsletter: true,
  comments: 'This is a test comment',
  referrer: null // Will be omitted
};

const serialized = serialize(formData);
console.log(serialized);
// "firstName=Jane&lastName=Smith&email=jane.smith%40email.com&newsletter=true&comments=This%20is%20a%20test%20comment"

// Use in a POST request
fetch('/api/submit', {
  method: 'POST',
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
  body: serialized
});

Search functionality:

function buildSearchUrl(baseUrl, searchCriteria) {
  const queryString = serialize(searchCriteria);
  return queryString ? `${baseUrl}?${queryString}` : baseUrl;
}

const searchCriteria = {
  q: 'javascript tutorial',
  level: 'beginner',
  duration: undefined, // Will be removed
  free: true,
  language: 'en'
};

const searchUrl = buildSearchUrl('https://example.com/search', searchCriteria);
console.log(searchUrl);
// "https://example.com/search?q=javascript%20tutorial&level=beginner&free=true&language=en"

E-commerce product filtering - building dynamic URLs for product search and filtering:

import { serialize } from '@inpulse-ui/utils';

// Product filter state from user interface
const productFilters = {
  category: 'clothing',
  brand: 'Nike',
  minPrice: 50,
  maxPrice: 200,
  size: 'M',
  color: 'blue',
  inStock: true,
  sale: null, // User hasn't selected this filter
  rating: undefined // User cleared this filter
};

// Serialize filters for URL
const filterQuery = serialize(productFilters);
const productUrl = `https://shop.example.com/products?${filterQuery}`;

console.log('Product filter URL:', productUrl);
// "https://shop.example.com/products?category=clothing&brand=Nike&minPrice=50&maxPrice=200&size=M&color=blue&inStock=true"

// Use for browser history and bookmarkable URLs
window.history.pushState({}, '', productUrl);

// Or for AJAX requests to filter API
fetch(`/api/products?${filterQuery}`)
  .then(response => response.json())
  .then(products => {
    console.log('Filtered products:', products);
  });