如何在 Svelte 中迭代 json 字典

Question

在 Svelte 中，#each 构造可用于迭代类似数组的对象。如果有一个 JSON 字典对象，Svelte 是否提供了一种迭代 JSON 字典以填充下拉菜单的方法？我的数据是 API 调用的结果，如下所示：

const obj = { 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}