Necesito ayuda para acceder a objetos específicos en un archivo JSON basado en un valor de nombre en Svelte.
Estoy usando JSON como fuente de datos y puedo ingresarlo en mi página y recorrerlo con cada uno.
El JSON se ve así:
[ { "id": 1, "title": "Project 1", "body": "Project 1 text" }, { "id": 2, "title": "Project 2", "body": "Project 2 text" } ]Accedo al JSON así:
<script context="module"> export const load = async ({ fetch }) => { const res = await fetch("https://amarton.github.io/amcom-portfolio-svelte/static/port.json"); const projects = await res.json(); return { props: { projects, } } } </script> <script> export let projects; </script>Y luego recorre y muéstralo así:
{#each projects as project} <h2>{project.title}</h2> <p>{project.body}</p> {/each}Me gustaría poder acceder a los objetos en función de mis identificadores asignados. Por ejemplo, ¿cómo tomo SOLO el objeto con la identificación de 2 y muestro su título y cuerpo en mi página?
Lo siento si esta es una pregunta muy básica y muchas gracias por cualquier ayuda que pueda brindar.
No usaría {#each} y, en su lugar, obtendría el elemento en el JS. Por ejemplo, así:
$: project = projects.find(p => p.id == '2'); Ahora puede hacer referencia al project tal como está sin el bucle.
Si desea una selección dinámica, puede vincular un elemento de select a una ID como esta:
<script> export let projects = []; let id = ''; $: project = projects.find(p => p.id == id); </script> <label> Project <select bind:value={id}> <option /> {#each projects as p} <option value={p.id} label={p.title} /> {/each} </select> </label> {#if project} <h2>{project.title}</h2> <p>{project.body}</p> {/if} La declaración reactiva ( $: :) garantiza que el project se actualice si los projects o la id cambian.