Svelte 迭代對象數組

Question

擁有這個固定的對象數組，如下所示：

export let items = [
  {
    name: 'package',
    subname: 'test'
  },
  {
    name: 'package',
    subname: 'test1'
  },
  {
    name: 'pack',
    subname: 'test2'
  }
]

可以使用每個或其他任何東西來使用迭代來獲得這樣的東西嗎？

<div class='item'>
  <div class='name'>package</span>
  <div class='subname'>test</span>
  <div class='subname'>test1</span>
</div>

<div class='item'>
  <div class='name'>pack</span>
  <div class='subname'>test2</span>
</div>

Answer 1

一個解決方案是將這些項目合並到一個對象中，該對象具有不同的name鍵和所有subname的數組作為值，就像這樣：

{
    "package": [
        "test",
        "test1"
    ],
    "pack": [
        "test2"
    ]
}

您可以在getSubnamesByName函數中執行此操作：

    const getSubnamesByName = (items) => {
        const mergedItems = {}
        items.forEach(({name, subname}) => {
            if (mergedItems[name]) mergedItems[name].push(subname)
            else mergedItems[name] = [subname]
        })
        
        return mergedItems
    }

然后只需將結果存儲在安裝組件時填充的mergedItems變量中：

<script>
    import { onMount } from 'svelte';

    const ITEMS = [ /* ... */ ];
    
    let mergedItems = {}
    
    const getSubnamesByName = (items) => { /* ... */}
    
    onMount(async () => {
        mergedItems = getSubnamesByName(ITEMS)
    })
</script>

最后通過使用 2 #each塊迭代這個對象的鍵和值：

{#each Object.keys(mergedItems) as name}
    <div class='item'>
        <div class='name'>{name}</div>
        
        {#each mergedItems[name] as subname}
            <div class='subname'>{subname}</div>
        {/each}
    </div>
{/each}

看看REPL 。