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

如果你想要一个动态的选择，你可以绑定一个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

反应性语句($:)确保如果projects或id发生变化，project也会更新。