CODEWITHSUNDEEP
javascripthtmlcsssveltesapper
Marco
Marco

Reputation: 1205

svelte html list chunks / segments display -

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

  • 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.

    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)

    My component/page:

    <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>

    The output is below:enter image description here

    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:

    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

    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

  • tag, it gave me [object, object]

    I will file this under sapper and svelte but also under html, css and js.

    Any Idea?

    Upvotes: 1

    Views: 786

    • Answers (2)

    Rich Harris
    Rich Harris

    Reputation: 29615

    You could break the list up into chunks, as joshnuss suggests. Alternatively, you could add the separator inside the each loop on every fifth element:

    {#each posts as {title, body}, i}
  <li>
    {i * 2} -- {title} : {body}          
  </li>

  {#if (i + 1) % 5 === 0}
    <hr>
  {/if}
{/each}

    Demo here.

    Upvotes: 3

    joshnuss
    joshnuss

    Reputation: 2047

    You'll need two levels of iteration.

    In your script tag, chunk the posts into a list of lists:

    import chunk from 'lodash/chunk'

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

    And then iterate over the chunks:

    {#each chunks as chunk, i}

   {#each chunk as post, j}
      {(i * chunkSize) + j}. {post.title}
   {/each}

   ======================
{/each}

    Upvotes: 2

    Related Questions