I am trying to make a dynamic drop down base on what is selected I want to make a pocketbase collection getFulllist call and what ever data I get I want to return it to the frontend (+page.svelte) file where it will be displayed in a table.
I am using let export data; to get dynamic dropdown data to front end. the load function ( responsible for getting data for dropdowns) is returning { userData }; so in the frontend I am I when I am doing data.response I am getting undefined. Can someone please help me figure it out.
here is my +page.svelte code.
<script> import { enhance } from '$app/forms'; export let data; let selectedUser = ''; let selectedCourse = ''; function handleUserChange(event) { selectedUser = event.target.value; selectedCourse = ''; } function handleCourseChange(event) { selectedCourse = event.target.value; } async function showSelection() { console.log('Selected User:', selectedUser); console.log('Selected Course:', selectedCourse); } const linkTypeOptions = [ { value: 'Internal', text: 'Internal' }, { value: 'External', text: 'External' } // ... more options ]; const linkResultOptions = [ { value: 'Success', text: 'Success' }, { value: 'Failure', text: 'Failure' } // ... more options ];</script><div><h1 class="text-white-700 text-center text-4xl font-bold">Select Client Data</h1> {#if data}<form action="?/userSelection" method="POST" use:enhance class="flex flex-col items-center space-y-4 p-10"><select name="user" class="select select-accent w-full max-w-xs" value={selectedUser} on:change={handleUserChange}><option disabled selected>Select a User</option> {#each data.userData as user}<option value={user.user}>{user.user}</option> {/each}</select> {#if selectedUser !== ''}<select name="course" class="select select-accent w-full max-w-xs" value={selectedCourse} on:change={handleCourseChange}><option disabled selected>Select a Course</option> {#each data.userData.find((user) => user.user === selectedUser)?.courses || [] as course}<option value={course}>{course}</option> {/each}</select> {/if}<button type="submit" on:click={showSelection} class="btn btn-primary">Get Data</button></form> {:else}<p>Loading...</p> {/if} {#if data.response}<table class="min-w-full divide-y divide-gray-200 overflow-x-auto rounded-md shadow"><thead><tr><th class="bg-gray-50 px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500"> ID</th><th class="bg-gray-50 px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500"> Link</th><th class="bg-gray-50 px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500"> Link Type</th><th class="bg-gray-50 px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500"> Link Results</th></tr></thead><tbody class="divide-y divide-gray-700 bg-gray-100"> {#each data.response as row}<tr class="hover:bg-gray-100"><td class="whitespace-nowrap px-6 py-4 text-sm font-medium text-gray-900"> {row.id}</td><td class="px-6 py-4 text-left text-sm text-gray-500"><a href={row.link} class="text-blue-500 underline">{row.url}</a></td><td class="px-6 py-4 text-left text-sm"><select class="w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500"> {#each linkTypeOptions as option}<option value={option.value} selected={row.linkType === option.value}> {option.text}</option> {/each}</select></td><td class="px-6 py-4 text-left text-sm"><select class="w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500"> {#each linkResultOptions as option}<option value={option.value} selected={row.linkResults === option.value}> {option.text}</option> {/each}</select></td></tr> {/each}</tbody></table> {:else}<div><p>Select User First</p></div> {/if}</div>Also here is my +page.server.js code. making calls to collection based on what is selected works so I am just returning some dummy json for testing purpose.
export async function load({ locals }) { try { const users = await locals.pb.collection('UserData').getFullList(); const userCoursesMap = new Map(); users.forEach(entry => { const userId = entry.user[0]; const courseName = entry.courseName; if (userCoursesMap.has(userId)) { userCoursesMap.get(userId).push(courseName); } else { userCoursesMap.set(userId, [courseName]); } }); const userData = Array.from(userCoursesMap).map(([userId, courses]) => ({ user: userId, courses: courses })); return { userData }; } catch (error) { console.error('Error fetching user data:', error); throw error; }}export const actions = { userSelection: async ({ request }) => { const formData = await request.formData(); const user = formData.get("user"); let response = [ { id: 'zuwhimcnnaxlwdh', linkResult: '', linkType: '', url: 'https://example.com/123', user: 'userA' }, { id: 'zv43oplxdw3prl9', linkResult: '', linkType: '', url: 'https://example.io/334', user: 'userA' }, { id: 'zwngacho00xetg0', linkResult: '', linkType: '', url: 'https://example.xyz/667', user: 'userA' } ]; console.log(user) return { response } }};