精简每个块分组结果的困境

Question

我有一个名为 products 的数组，其中包含产品。每个产品都属于一个类别。

 product = { category : "shorts", name : "whatever", ...}

现在，当我在 svelte 中迭代该数组时，我使用每个块

{#each products as product}
 <li>
   {product.category} - {product.name}
</li>
{/each}

所以我的结果是这样的： 短裤 - blueshort 短裤 - greenshort 短裤 - 黄色短裤

我的问题是如何按类别对显示结果进行分组。像这样

 shorts
          blueshort
          greenshort
          yellowshort
     hats 
          bluehat
          greenhat
          yellowwhatever

有没有办法从每个块开始，或者我必须在脚本中处理它，然后将它发送到 html？

有没有办法在每个块中做到这一点？

Answer 1

您可以使用 reduce 按类别和嵌套 each 语句对结果进行分组：

<script>
    let products = [
        { category : "shorts", name : "hat one" },
        { category : "shorts", name : "hat two" },
        { category : "hats", name : "hat one" },
        { category : "hats", name : "hat two" },
    ];
    
    // group products by category
    $: data = products.reduce((acc, curr) => {
        // create key and value of array if hasn't been created yet
        if (!acc[curr.category]) acc[curr.category] = [];
        acc[curr.category].push(curr.name);
        return acc;
    }, {});
</script>

<div>
    {#each Object.entries(data) as item}
    <div>{item[0]}</div>
    <ul>
        {#each item[1] as name}
            <li>{name}</li>
        {/each}
    </ul>
    {/each}
</div>

这是一个example in action

希望对您有所帮助。