Read repeated URL query parameters with URLSearchParams.getAll()

Read repeated query parameters with URLSearchParams.getAll() before a hackathon demo loses one of the user's selections.

A prototype might send two selected skills as skill=design&skill=javascript. A teammate who reads only the first value can show an incomplete summary even though the browser sent both. Make the representation part of the interface contract before connecting the form to the results screen.

Read the complete list

MDN documents getAll() as returning an array of strings for the requested key. A missing key produces an empty array. Use that shape consistently instead of switching between a string and an array depending on how many selections exist.

const params = new URLSearchParams(
  'skill=design&skill=javascript&note=a%2Bb'
);
const skills = params.getAll('skill');

console.assert(skills.length === 2);
console.assert(skills[0] === 'design');
console.assert(skills[1] === 'javascript');
console.assert(params.getAll('missing').length === 0);

For a hackathon registration prototype, document whether repeated values preserve a deliberate ranking or represent an unordered selection. That choice belongs to your application. Do not silently remove duplicates if two entries can carry different meaning elsewhere in the workflow.

Build the same representation

Keep the serializer beside the parser during the rehearsal. Start with an empty parameter object and append one entry for each selected value. This example uses fictional skills rather than an event's actual registration rules.

const output = new URLSearchParams();
for (const skill of skills) output.append('skill', skill);
console.assert(output.getAll('skill').length === 2);

The URLSearchParams reference explains encoding and iteration. Prefer its serializer to manually joining unescaped user text with ampersands. Decide which values your server accepts separately; correctly encoded input can still be invalid for the product.

Rehearse the boundary cases

Run the demo with no selections, one selection, two different selections, and the same value twice. Compare the visible summary with the parsed array. Add a value containing a space, then one containing a literal plus sign through append(), and check the round trip.

Ask the teammate implementing the receiving endpoint to repeat those cases. Save the expected representation in the README so the next person does not replace it with a comma-separated string during the final hour. Keep private contact details out of URLs, which people may copy into screenshots and browser history.

When choosing a project to rehearse, browse the English Stavleak hackathon catalog, then check the selected event's own requirements before adapting the example.