title: svelte html list chunks / segments display -
body: <p>Please forgive my poor question description. I'm using svelte/sapper component. In that component I'm using preload function to access an api and retrieve list of posts. I display that list in the component. I would like to split the list in chunks (whatever number, 5, 10 etc) and display that chunk in my <li></p>
  
  <p>The problem is I don't have a clue where to start or how to do it in svelte. In this api, I know how many posts are in the array but in real dbs situation, assume I don't know how big the array is or how many entries I have. I just need to split the list and display it without knowing how many entries I'm dealing with in the component.</p>
  
  <p>Here is my svelte component (it is one in many sapper app components but I will not post the nav.svelte or the rest of the app as I think it is irrelevant)</p>
  
  <p>My component/page:</p>
  
  <pre><code>&lt;script context="module"&gt;
    export async function preload() {
    const res = await this.fetch("https://jsonplaceholder.typicode.com/posts");
    const data = await res.json();
    return { posts: data };
  
    }
  &lt;/script&gt;
  
  &lt;script&gt;
  
  /*
    export let posts;
    function ArrayChunking(arr, size) {
    var chunks = [];
    for(var i = 0; i &lt; arr.length; i += size) {
      chunks.push(arr.slice(i, i+size));
    }  
    return chunks;
  }
     console.log(ArrayChunking(posts, 5));
  */ 
  
      export let posts;
  
  &lt;/script&gt;
  
  &lt;style&gt;
    ol {
    background: #ff9999;
    padding: 20px;
    }
  
    ol li {
    background: #ffe5e5;
    padding: 5px;
    margin-left: 35px;
    } 
  &lt;/style&gt;
  
   &lt;div&gt; &lt;!--Test API https://jsonplaceholder.typicode.com/ --&gt;
        &lt;p&gt;++++ Posts from &lt;a href="https://jsonplaceholder.typicode.com/posts" target="_blank"&gt;https://jsonplaceholder.typicode.com/posts&lt;/a&gt; ++++&lt;/p&gt;
        &lt;ol&gt;
          {#each posts as {title, body}, i}
          &lt;li&gt;
             {i * 2} -- {title} : {body}          
          &lt;/li&gt;
          {/each}
        &lt;/ol&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>The output is below:<a href="https://i.stack.imgur.com/IcjmP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IcjmP.png" alt="enter image description here"></a></p>
  
  <p>So what I'm trying to achieve is the display that list in smaller groups, so each group would be 5 items per list and then a divider and another 5 items, something like this:</p>
  
  <pre><code>1-item one
  2-item two
  3-item three
  4-item four
  5-item five
  
  ========================
  
  6-item 6
  7-item 7
  8-item 8
  9-item 9
  10-item 10
  </code></pre>
  
  <p>I don't know how to do that. I don't even have an idea to start with or where should it be entered, is it js in the script tag as I tried the ArrayChunking function but when I put chunks in the <li> tag, it gave me [object, object]</p>
  
  <p>I will file this under sapper and svelte but also under html, css and js.</p>
  
  <p>Any Idea?</p>