使用 svelte 将 json 文件加载到 html 时遇到问题

Question

我是苗条的新手，我必须将它用于我的实习生工作。

我有我的本地 json 文件并尝试将其转换为我的 HTML。我一直在到处寻找，但没有得到答案。

我尝试过这样做：

cat.svelte：

<script>
import {onMount} from "svelte";

let data = [];

onMount(async ()=>{
    const response = await fetch("./table_schema_name.json");
    data = await response.json();
    console.log(data)

});

</script>
<p>displa</p>
{#each data as item}
<div>
    <p>{item.table_name}</p>
    <p>display</p>
</div>
{/each}

我的 JSON 文件如下所示：

table_schema_name.json

[
    {"table_schema": "a", "table_name": "a1"},
    {"table_schema": "a", "table_name": "a2"},
    {"table_schema": "a", "table_name": "a3"}, 
    {"table_schema": "b", "table_name": "b1"},
     {"table_schema": "b", "table_name": "b2"}
]

我从控制台得到的错误。

cat.svelte:7 GET http://localhost:3000/table_schema_name.json 404 (Not Found)
cat.svelte:9 Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

非常感谢。真的需要用 SVELTE 糟糕地在 HTML 中显示 json 文件！

Answer 1

如果您提供 json，我建议您像这样在本地导入它：

<script>
  import data from "./path/to/table_schema_name.json";
</script>

{#each data as item}
<div>
    <p>{item.table_name}</p>
    <p>display</p>
</div>
{/each}

捆绑器将直接将其注入生成的代码中，因此服务器不会出现问题；）

Answer 2

在网上彻底搜索后，我自己解决了。

基本上，我将 table_schema_name.json 移至静态文件夹。通过将其移动到静态文件夹，我可以通过 URL 访问 JSON 文件。

所以我将代码更改为：

onMount(async ()=>{
    const response = await fetch("./table_schema_name.json");
    data = await response.json();
    console.log(data)

});

收件人：

import { onMount } from 'svelte';

let data = [];

onMount(async () => {
    const res = await fetch('http://localhost:3000/api/table_schema_name.json');
    data = await res.json();
});

我希望我早点发现这个问题，因为我已经浪费了几个小时来解决这个问题。希望我的回答能帮助和我遇到同样问题的人。