我需要帮助根据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的对象,并在页面中显示其标题和正文?

很抱歉,如果这是一个非常基本的问题,非常感谢您提供的任何帮助.

推荐答案

您不会使用{#each},而是在JS中获取该项.E、 g.这样:

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

现在,您可以在没有循环的情况下按原样引用project.

如果需要动态 Select ,可以将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

react 语句($:)确保在projectsid改变时更新project.

Javascript相关问答推荐

MathJax可以导入本地HTML文档使用的JS文件吗?

虚拟滚动实现使向下滚动可滚动到末尾

如何在输入元素中附加一个属性为checkbox?

如何使onPaste事件与可拖动的HTML元素一起工作?

如何在ASP.NET项目中使用Google Chart API JavaScript将二次轴线值格式化为百分比

为什么可选参数的顺序会导致问题?

Cherrio JS返回父div的所有图像SRC

自动滚动功能在当前图像左侧显示上一张图像的一部分

为什么在运行于<;img>;事件处理程序中的JavaScript中x和y是不可变的?

如何使用Reaction路由导航测试挂钩?

扩散运算符未按预期工作,引发语法错误

REACT-本机错误:错误类型错误:无法读取未定义的容器的属性

Select 所有输入.值

我在JS代码中收到超过最大调用堆栈大小的错误,但我找不到原因.有谁能帮我搬一下吗?

制表机表宽度在第一次加载时缩小,拖动后正在调整

从C#的Angular 来看,Java回调基础知识

This.forceUPDATE并通过Reaction-Router-DOM链接组件传递状态

无法从fixture 文件中提取数据

如何根据对象数组中的用户条目进行筛选

刺激控制器操作在点击时触发两次