Svelte 迭代对象数组答案

【问题标题】：Svelte iterate over array of objectsSvelte 迭代对象数组
【发布时间】：2021-07-29 10:48:00
【问题描述】：

拥有这样的固定对象数组：

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>

【问题讨论】：

您应该先进行分组，然后each 覆盖这些组。我不知道直接用每个块进行这种分组的好方法

标签： javascript loops svelte

【解决方案1】：

解决方案是将项目合并到一个对象中，该对象具有不同的 names 键和所有 subnames 的数组作为值，就像这样：

{
    "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。

【讨论】：