将每个块分组结果分隔

Question

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

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

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

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

我的结果是这样的:短裤——蓝色短裤短裤-绿短裤短裤-黄短裤

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

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>

下面是一个例子

希望这对你有帮助。