json中的Object.entries将使用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、chicken……)和宽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

我有一个更简单的建议，那就是让svelte {#each}块来处理对象处理。

查看此REPL

Answer 2

解决方案是：

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}