ym-reactive-grid

demo-data.json

{
    "constituencies": [
        {
            "id": 1,
            "name": "Aberafan Maesteg",
            "messages": [
                {
                    "sender": "John Doe",
                    "content": "Message content 1"
                },
                {
                    "sender": "Jane Smith",
                    "content": "<strong>Message content 2</strong>"
                }
            ]
        },
        {
            "id": 2,
            "name": "Aberdeen North",
            "messages": [
                {
                    "sender": "Alice Johnson",
                    "content": "Message content 3"
                },
                {
                    "sender": "Bob Brown",
                    "content": "Message content 4"
                }
            ]
        },
        {
            "id": 3,
            "name": "Aberdeenshire North and Moray East",
            "messages": [
                {
                    "sender": "Charlie Green",
                    "content": "Message content 5"
                },
                {
                    "sender": "Diana White",
                    "content": "Message content 6"
                }
            ]
        }
    ]
}

ym-reactive-grid.html

<script
	src="//unpkg.com/alpinejs"
	defer
></script>

<div x-data="constituencyData()">
	<select
		x-on:change="updateMessages"
		x-model="selectedConstituency"
	>
		<option value="">Select a constituency</option>
		<template
			x-for="constituency in constituencies"
			:key="constituency.id"
		>
			<option
				:value="constituency.name"
				x-text="constituency.name"
			></option>
		</template>
	</select>

	<div x-show="selectedMessages.length > 0">
		<h2>Messages</h2>
		<template
			x-for="message in selectedMessages"
			:key="message.sender"
		>
			<div>
				<strong x-text="message.sender"></strong>:
				<span x-text="message.content"></span>
			</div>
		</template>
	</div>
</div>

<script>
	function constituencyData() {
		return {
			constituencies: [],
			selectedConstituency: "",
			selectedMessages: [],
			async init() {
				await this.fetchData();
				const params = new URLSearchParams(window.location.search);
				const constituencyParam = params.get("constituency");
				if (constituencyParam) {
					this.selectedConstituency = decodeURIComponent(constituencyParam);
					this.updateMessages();
				}
			},
			async fetchData() {
				try {
					const response = await fetch(
						"https://youngminds.staging.campaignion.org/sites/youngminds/files/demo-messages.json"
					);
					if (!response.ok) {
						throw new Error("Network response was not ok");
					}
					const data = await response.json();
					this.constituencies = data.constituencies;
				} catch (error) {
					console.error("Error fetching data:", error);
				}
			},
			updateMessages() {
				this.selectedMessages = [];
				for (const constituency of this.constituencies) {
					if (constituency.name === this.selectedConstituency) {
						this.selectedMessages = constituency.messages;
						this.updateQueryParam();
						break;
					}
				}
			},
			updateQueryParam() {
				const params = new URLSearchParams(window.location.search);
				params.set(
					"constituency",
					encodeURIComponent(this.selectedConstituency)
				);
				window.history.replaceState(
					{},
					"",
					`${window.location.pathname}?${params}`
				);
			},
		};
	}
</script>