如何在 Svelte 中迭代 json 字典

Question

在 Svelte 中，#each 構造可用於迭代類似數組的對象。 如果有一個 JSON 字典對象，Svelte 是否提供了一種遍歷 JSON 字典以填充下拉菜單的方法？ 我的數據是 API 調用的結果，如下所示：

{ “foo”: “bar”, “batz”: “boink” }

Answer 1

您首先將您的對象轉換為一個包含您想要顯示的信息（鍵/值/兩者）的數組。
然后可以使用 #each 循環迭代這個數組。 看到這個REPL

<script>
const obj = { foo: "bar", batz: "boink" }

let keys = Object.keys(obj)  // ["foo", "batz"]
let values = Object.values(obj)  // ["bar", "boink"]
let entries = Object.entries(obj)  // [["foo", "bar"], ["batz", "boink"]]

</script>

{#each entries as [key, value]}
    <div>
    {key} - {value} 
    </div>  
{/each}