Object.entries从json中以svelte读取



我有一个问题,我有以下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点(description、name、source(,并将它们显示在我的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: []
};

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

查看此REPL

解决方案是:

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}

最新更新