时间戳

首页 > 解决方案 > Svelte 迭代对象数组

javascript - Svelte 迭代对象数组

问题描述

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

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>

标签： javascriptloopssvelte

解决方案

一种解决方案是将项目合并到一个对象中，该对象具有不同name的键和作为值的所有 s 的数组，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。

推荐阅读