0

我有一个问题，我已经关注 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 入口点（画布、鸡 ...）和宽 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: []
};
4

2 回答 2

1

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

看到这个REPL

于 2021-05-19T22:02:04.153 回答
0

解决方案是：

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}
于 2021-05-19T13:08:33.457 回答