Quiero crear una aplicación web que muestre una cantidad de clientes de una API, y cuando haga clic en un cliente, se mostrará información adicional para ese cliente.
Hasta ahora, obtuve mis datos de API como una matriz, creé una lista y un botón para cada elemento de la matriz. Ahora, cuando presiono un botón de cliente, quiero volver a llamar a mi API pero con la identificación como parámetro para acceder a información específica sobre ese cliente.
Sin embargo, para hacerlo, necesito guardar la variable "id" del botón que presioné y no entiendo cómo implementar eso.
Así es como se ve mi aplicación (en Svelte)
<script> import { onMount } from 'svelte' let customers = [] onMount(() => { fetch('https://europe-west3-gcp-task-346814.cloudfunctions.net/customer-function-1/getCustomer') .then(response => response.json()) .then(result => customers = result) }) function handleClick() { } </script> {#each customers as customer (customer.id)} <h2> <button on:click={() => handleClick()}> {customer.name} </button> </h2> <p> id: {customer.id} </p> <hr> {/each}Tenga en cuenta que soy bastante nuevo en JS y HTML.
Puedes hacer algo como el siguiente código. Básicamente, debe pasar el cliente que obtiene de la iteración a la función handleClick .
<script> import { onMount } from 'svelte' let customers = [] onMount(() => { fetch('https://europe-west3-gcp-task-346814.cloudfunctions.net/customer-function-1/getCustomer') .then(response => response.json()) .then(result => customers = result) }) function handleClick(customer) { // here you have access to the customer id by doing customer.id console.log(customer) } </script> {#each customers as customer (customer.id)} <h2> <button on:click={() => handleClick(customer)}> {customer.name} </button> </h2> <p> id: {customer.id} </p> <hr> {/each}El código cambió:
<button on:click={() => handleClick(customer)}>y
function handleClick(customer) { console.log(customer) }