如何在Svelte中遍历JSON字典对象以填充下拉菜单

Svelte 没有为#each语法提供直接遍历对象字典的内置能力，但可以配合原生JavaScript的对象处理方法，将字典转为类数组结构后即可正常遍历使用，完全可以满足下拉菜单的填充需求。

常用实现方式有以下两种，适配不同场景：

• 方式一：同时获取键和值（最适合下拉菜单场景）
  使用Object.entries()将对象转为[键, 值]格式的二维数组，你可以灵活指定下拉选项的显示内容与提交值：

<script>
  // 你的API返回数据
  const obj = { foo: "bar", batz: "boink" }
</script>

<select>
  {#each Object.entries(obj) as [key, value]}
    <!-- 示例：提交值为key，显示内容为value，可根据需求自行调整 -->
    <option value={key}>{value}</option>
  {/each}
</select>

• 方式二：仅需遍历键或仅需遍历值
  如果只需要用到对象的键，使用Object.keys()；如果只需要用到对象的值，使用Object.values()即可：

<!-- 仅遍历值的示例 -->
<select>
  {#each Object.values(obj) as value}
    <option value={value}>{value}</option>
  {/each}
</select>

注意：如果你的API返回对象后续会动态更新，只要保证数据是Svelte可识别的响应式变量，上述写法本身支持数据更新后自动重新渲染下拉选项。

内容的提问来源于stack exchange，提问作者Joe