Javascript 苗条html列表块/段显示-

请原谅我拙劣的问题描述。我正在使用苗条/工兵组件。在该组件中，我使用preload函数访问api并检索帖子列表。我在组件中显示该列表。我想将列表分成若干块（无论数字是多少，5、10等等），并在我的

中显示该块

问题是我不知道从哪里开始，也不知道如何在苗条的环境下开始。在这个api中，我知道数组中有多少个POST，但在实际的dbs情况下，假设我不知道数组有多大或者我有多少个条目。我只需要拆分列表并显示它，而不知道我在组件中处理了多少条目

这是我的svelte组件（它是许多sapper应用程序组件中的一个，但我不会发布nav.svelte或应用程序的其余部分，因为我认为这与此无关）

我的组件/页面：

<script context="module">
  export async function preload() {
  const res = await this.fetch("https://jsonplaceholder.typicode.com/posts");
  const data = await res.json();
  return { posts: data };

  }
</script>

<script>

/*
  export let posts;
  function ArrayChunking(arr, size) {
  var chunks = [];
  for(var i = 0; i < arr.length; i += size) {
    chunks.push(arr.slice(i, i+size));
  }  
  return chunks;
}
   console.log(ArrayChunking(posts, 5));
*/ 

    export let posts;

</script>

<style>
  ol {
  background: #ff9999;
  padding: 20px;
  }

  ol li {
  background: #ffe5e5;
  padding: 5px;
  margin-left: 35px;
  } 
</style>

 <div> <!--Test API https://jsonplaceholder.typicode.com/ -->
      <p>++++ Posts from <a href="https://jsonplaceholder.typicode.com/posts" target="_blank">https://jsonplaceholder.typicode.com/posts</a> ++++</p>
      <ol>
        {#each posts as {title, body}, i}
        <li>
           {i * 2} -- {title} : {body}          
        </li>
        {/each}
      </ol>
 </div>

我不知道怎么做。我甚至不知道该从哪里开始，也不知道应该在哪里输入，在我尝试ArrayChunking函数时，脚本标记中是否有js，但当我将块放入

标记时，它给了我[object，object]

我将在sapper和svelte下归档，但也将在html、css和js下归档

---

有什么想法吗？

您需要两个级别的迭代

在脚本标记中，将帖子分块到列表列表中：

import chunk from 'lodash/chunk'

const chunkSize = 5
const chunks = chunk(posts, chunkSize)

然后在块上迭代：

{#每个块作为块，i}
{#每个块作为post，j}
{（i*chunkSize）+j}。{post.title}
{/每个}
======================
{/每个}

您需要两个级别的迭代

在脚本标记中，将帖子分块到列表列表中：

import chunk from 'lodash/chunk'

const chunkSize = 5
const chunks = chunk(posts, chunkSize)

然后在块上迭代：

{#每个块作为块，i}
{#每个块作为post，j}
{（i*chunkSize）+j}。{post.title}
{/每个}
======================
{/每个}

正如Joshnus所建议的那样，您可以将列表分为多个部分。或者，您可以在每五个元素的

每个
循环中添加分隔符：

{#每个帖子都是{title，body}，i}

{i*2}--{title}:{body}

{#如果（i+1）%5==0}

{/if}
{/每个}

.
正如乔什努斯所建议的那样，你可以将列表分成几块。或者，您可以在每五个元素的
每个
循环中添加分隔符：

{#每个帖子都是{title，body}，i}

{i*2}--{title}:{body}

{#如果（i+1）%5==0}

{/if}
{/每个}

.
谢谢您，先生。它起作用了。非常有用。谢谢，先生。它起作用了。非常有用。谢谢。演示只是我没想到的额外一步。非常感谢。我很感激。演示只是我没想到的额外一步。非常感谢。我很感激。