Object.entries 来自 json 以 svelte 读出

Question

我有一个问题，我已经关注 JSON 文件：

"entries": {
    "Canvas": {
        "description": "<p>Ein Quadratmeter Segeltuch von durchschnittlicher Qualität und durchschnittlichem Gewicht. Wird für alle Artikel und Kleidungsstücke verwendet.</p>\n<p>Je niedriger die Zahl, desto besser die Qualität und desto schwerer das Gewicht. Das Segeltuch Nr. 1 wiegt etwa 1,7 Pfund pro Quadratmeter, während das schwächere, leichtere Segeltuch Nr. 12 nur 0,7 Pfund wiegen kann.</p>",
        "name": "Segeltuch",
        "source": "SHB S. 157"
    },
    "Chicken": {
        "description": "<p>Als Quelle für Omeletts und Hühnerflügel wiegt das durchschnittliche erwachsene Huhn zwischen 5 und 10 Pfund.</p>",
        "name": "Hähnchen",
        "source": "SHB S. 157"
    },
    "Cinnamon": {
        "description": "<p>Ziegen sind nützliche Lebewesen für Kleinbauern und Hochlandbewohner und verhindern wirksam das Überwachsen von Wiesen, während sie Milch, Käse und schließlich Häute und Fleisch liefern.</p>\n<p>Je nach Rasse können erwachsene Ziegen von 45 Pfund bis zu 300 Pfund reichen.</p>",
        "name": "Zimt",
        "source": "SHB S. 157"
    },
    "Cloves": {
        "description": "<p>Ein starkes Gewürz, das sowohl von Köchen als auch von Brennereien geschätzt wird und sich gut zum Würzen von Fleisch und Eintöpfen, reichhaltigen Saucen, warmen Getränken wie Apfelwein und Chai-Tee, Brot, Käse und süßen Desserts wie Kuchen und Obstkuchen eignet.</p>\n<p>Nelken sind die reichen, getrockneten, ungeöffneten Knospen des Syzygium aromaticum, eines immergrünen Baumes aus der Familie der Myrten.</p>",
        "name": "Nelken",
        "source": "SHB S. 157"
    },
    "Copper": {
        "description": "<p>Kupfer wird von fortgeschrittenen Schiffbauern, Alchemisten, bestimmten Juwelieren und Köchen gleichermaßen begehrt und wird üblicherweise an der Oberfläche abgebaut. Der Untertagebau findet jedoch statt, wenn die Oberflächenquellen erschöpft sind oder nicht mehr lokalisiert werden können.</p>\n<p>Obwohl es für Rüstungen verwendet werden kann, ist es weitaus besser mit Zinn zu mischen, um die viel bessere Bronzelegierung für militärische Zwecke herzustellen.</p>",
        "name": "Kupfer",
        "source": "SHB S. 157"
    },

我怎样才能最好地读出json入口点（canvas，鸡...）和宽json点（描述，名称，来源）并显示它们在我的 html 中。它们应该单独显示。之前有一个不同的json格式，我读取数据如下：

{#each deTradegoods.entries as tradegood, i}
            <div class="container">

                <div class="flex">
                    <div class="en-div">
                        <h3>
                            Englisches Original
                        </h3>
                        <p>
                            {tradegood.id}
                        </p>
                    </div>
                    <div class="de-div">
                        <h3>
                            Deutsche übersetzung
                        </h3>
                            <input type="text" id="{tradegood.id}" name="dtname" bind:value="{tradegood.name}" disabled={!shown[i]}>
                            <button on:click={() => handelClick(i)} class="btn">
                                {shown[i] ?'safe' : 'Edit'}
                            </button>
                    </div>
                </div>
                    <div class="de-description">
                        <h3>Beschreibung</h3>
                        {tradegood.description}
                    </div>
                    <div class="de-source">
                        <h3>Seite im Buch</h3>
                        {tradegood.source}
                    </div>
            </div>
            {/each}

我预先将 json 加载到 let 中

export let file;
let deTradegoods = {
    entries: []
};

Answer 1

解决方法是：

onMount(async () => {
const response = await fetch('/api.json?file=' + file);
const json = await response.json();
items = Object.entries(json.entries)
    .map(([key, value]) => {
        return Object.assign(value, {id: key})
    }); });

和

{#each items as item, i}

Answer 2

我有一个更简单的建议，其中包括让 svelte {#each} 块处理对象处理。

看到这个REPL

Object.entries 来自 json 以 svelte 读出

Object.entries from json to read out with svelte

json

svelte

sveltekit