Not quite a time ago, but roughly two years ago I wrote a on updating and supporting, URL parameters with Vue.js. long blog post The idea was this: Given an application that lets you perform various tweaks, it would be nice if the URL was updated to reflect the current state of the application. This would let you bookmark, or share, the with others and they would get the same view as you. URL In that post, I built a very basic "data filtering" application and then updated it to support updates to the URL. I thought I'd revisit that post and demonstrate building it in . As always, I'd love to hear your thoughts on this, especially if you've done something similar. vanilla JavaScript The Initial Application I'm going to cheat a bit and steal some of the text/images from the older post. Here's our application in its default state: There's a list of items that consist of people, cats, and a dog. Each item has a name and type. On top, there are filters for the name and type. If you enter any text, the items that match the name (ignoring case) will be shown. If you select one or more of the types, only those matching will be shown. Let's take a look at the code. First, the HTML: <div id="app">
	<h2>Items</h2>

	<p>
	<input type="search" placeholder="Filter by name" id="nameFilter"> 
	<input type="checkbox" value="person" id="personType" name="typeFilter"> 
	<label for="personType">Only People</label>
	
	<input type="checkbox" value="cat" id="catType" name="typeFilter"> 
	<label for="catType">Only Cats</label>

	<input type="checkbox" value="dog" id="dogType" name="typeFilter"> 
	<label for="dogType">Only Dogs</label>
	</p>

	<ul id="results">
		
	</ul>
</div> This isn't too different from the earlier Vue version, but I've removed and other Vue declarations. Now, the JavaScript. First, I've got my data hard-coded on top. v-model Here's how it looks: const ITEMS = [
	{ name: "Ray", type: "person" },
	{ name: "Lindy", type: "person" },
	{ name: "Jacob", type: "person" },
	{ name: "Lynn", type: "person" },
	{ name: "Noah", type: "person" },
	{ name: "Jane", type: "person" },
	{ name: "Maisie", type: "person" },
	{ name: "Carol", type: "person" },
	{ name: "Ashton", type: "person" },
	{ name: "Weston", type: "person" },
	{ name: "Sammy", type: "cat" },
	{ name: "Aleese", type: "cat" },
	{ name: "Luna", type: "cat" },
	{ name: "Pig", type: "cat" },
	{ name: "Cayenne", type: "dog" }
] Normally this would be loaded in via a network call or some such. Next, I define different variables and the "start-up" code: let filteredItems = ITEMS;
let $results, $nameFilter, $typeFilter;

document.addEventListener('DOMContentLoaded', init, false);
function init() {
	$results = document.querySelector('#results');
	$nameFilter = document.querySelector('#nameFilter');
	$typeFilter = document.querySelectorAll('input[name="typeFilter"]');
	
	$nameFilter.addEventListener('input', updateFilter, false);
	$typeFilter.forEach(f => f.addEventListener('change', updateFilter, false));
	
	renderItems();
} The only really interesting part is here that I listen for any change or input event on my fields on top, all of them going to the same particular function to handle those changes. just handles generated my HTML list: renderItems function renderItems() {
	let res = '';
	filteredItems.forEach(i => res +=`<li>${i.name}</li>`);
	$results.innerHTML = res;
} But is a bit more complex. I need to potentially filter by text input as well as multiple different "type" filters: updateFilter function updateFilter() {
	let selectedTypes = Array.from($typeFilter).reduce((res, cur) => {
		if(cur.checked) res.push(cur.value);
		return res;
	}, []);
	
	filteredItems = ITEMS.filter(i => {
		if($nameFilter.value !== '' && i.name.toLowerCase().indexOf($nameFilter.value.toLowerCase()) === -1) return false;
		if(selectedTypes.length && !selectedTypes.includes(i.type)) return false;
		return true;
	});
	
	renderItems();
} I think the only really odd thing above is , because returns a , not a real array. Array.from querySelectorAll NodeList All in all, I've got a bit more code than the Vue.js version, but I'm also not loading Vue, so a net win for this simple application. You can test this yourself below. https://codepen.io/cfjedimaster/pen/bGmWQRy?embedable=true The Updated Application Ok, for our new version, we need to do two things: When a person filters in any way, update the URL to reflect the filter. When the application loads, check the URL to see if filters were supplied. Let's start with the latter. In my method, in the end, I added a call to a new function, : updateFilter updateURL function updateURL() {
	let qp = new URLSearchParams();
	if($nameFilter.value !== '') qp.set('filter', $nameFilter.value);

	let selectedTypes = Array.from($typeFilter).reduce((res, cur) => {
		if(cur.checked) res.push(cur.value);
		return res;
	}, []);

	if(selectedTypes.length) qp.set('typeFilter', selectedTypes);
	history.replaceState(null, null, "?"+qp.toString());
} This uses the API to generate a new query string. I begin by checking the input field for a value and if it exists, set the param to it. URLSearchParams filter For the selected types, I check them all and simply append the value if they are checked. This creates an array I can then set to by relying on an automatic conversion. typeFilter toString Finally, I use the method of the History API to update the URL. The third argument doesn't need to be a full URL as I'm just changing the values in the query string. replaceState That part's rather easy, but to support recognizing the parameters on load, I've modified my init function: let filteredItems = Array.from(ITEMS);
let $results, $nameFilter, $typeFilter, $peopleFilter, $catFilter, $dogFilter;

document.addEventListener('DOMContentLoaded', init, false);
function init() {
	$results = document.querySelector('#results');
	$nameFilter = document.querySelector('#nameFilter');
	$typeFilter = document.querySelectorAll('input[name="typeFilter"]');

	$peopleFilter = document.querySelector('#personType');
	$catFilter = document.querySelector('#catType');
	$dogFilter = document.querySelector('#dogType');
	
	$nameFilter.addEventListener('input', updateFilter, false);
	$typeFilter.forEach(f => f.addEventListener('change', updateFilter, false));

	let qp = new URLSearchParams(window.location.search);
	if(qp.get('filter')) $nameFilter.value = qp.get('filter');
	let tf = qp.get('typeFilter');
	if(tf) {
		tf.split(',').forEach(t => {
			if(t === 'people') $peopleFilter.checked = true;
			if(t === 'cat') $catFilter.checked = true;
			if(t === 'dog') $dogFilter.checked = true;
		});
	}

	updateFilter();
	renderItems();
} I've added a few more variables to make it easier to check my individual type filters. I get my current query string and then begin checking for my two main values, and . Working with is easy, but for the , I need to check each possible value and check the appropriate box. Also, notice I've added a call to update the filter since it's possible we have filtering going on. filter typeFilter filter typeFilter And that's it. Now, I'd like to show you on CodePen, but unfortunately it won't work correctly there. You can grab the code there if you want ( ), but don't bother trying to it there. https://codepen.io/cfjedimaster/pen/dygWQwj?editors=1011 use Instead, I put it in one of my repos and you can browse it here: https://cfjedimaster.github.io/webdemos/history/ Or, test an example with stuff already filtered: https://cfjedimaster.github.io/webdemos/history/?filter=y&typeFilter=person Also published here.

This story contains AI-generated text. The author has used AI either for research, to generate outlines, or write the text itself. 

How to Add Streaming to Your Jamstack Site in Minutes

My Follow-up to Creating a Web Component for Reveal.js 

My Blog

How to Update and Support URL Parameters in JavaScript

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

A Cat-Centric Guide to Using Web Components in Alpine.js

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

The Noonification: How to Use AI for Your B2B Marketing (11/11/2022)

105 Stories To Learn About Functional Programming

A Cat-Centric Guide to Using Web Components in Alpine.js

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

The Noonification: How to Use AI for Your B2B Marketing (11/11/2022)

105 Stories To Learn About Functional Programming

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps