使用svelte无法将json文件加载到html中

问题描述

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

我有我的本地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_name": "a3"},{"table_schema": "b","table_name": "b1"},"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文件！

解决方法

如果提供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}

捆绑程序会将其直接注入到生成的代码中，因此服务器不会出现任何问题;）

在互联网上进行彻底搜索后，我自己设法解决了这个问题。

基本上，我将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();
});

我希望我能早点发现这个问题，因为我已经浪费了很多时间来解决这个问题。希望我的回答对那些与我面临同样问题的人有所帮助。

html json svelte