javascript - Svelte 从 JSON 中选择特定对象数据

Question

我需要帮助基于 Svelte 中的名称值访问 JSON 文件中的特定对象。
我使用 JSON 作为数据源，并且能够将其拉入我的页面并循环遍历它。
JSON 看起来像这样:

[
    {
      "id": 1,
      "title": "Project 1",
      "body": "Project 1 text"
    },
    {
      "id": 2,
      "title": "Project 2",
      "body": "Project 2 text"
    }
  ]

我像这样访问 JSON:

<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>

然后循环并显示如下:

       {#each projects as project}
            <h2>{project.title}</h2>
            <p>{project.body}</p>
        {/each}

我希望能够根据我分配的 ID 访问对象。例如，我如何抓取 id 为 2 的对象并在我的页面中显示其标题和正文？
抱歉，如果这是一个非常基本的问题，非常感谢您提供的任何帮助。

Answer 1

你不会使用 {#each}而是在 JS 中获取项目。例如。像这样:

$: project = projects.find(p => p.id == '2');

您现在可以引用 project就像没有循环一样。
如果您想要动态选择，您可以绑定(bind) select像这样的 ID 元素:

<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}

REPL
响应式(Reactive)语句 ( $: ) 确保 project如果 projects 则更新或 id变化。