Отображение кусков / сегментов списка svelte html -

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

  • Проблема в том, что я не имею ни малейшего понятия, с чего начать и как это сделать в Svelte. В этом api я знаю, сколько сообщений находится в массиве, но в реальной ситуации с базами данных предположим, что я не знаю, насколько велик массив или сколько записей у меня есть. Мне просто нужно разделить список и отобразить его, не зная, сколько записей я имею дело в компоненте.

    Вот мой изящный компонент (это один из многих компонентов приложения 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>

    Результат ниже: введите описание изображения здесь

    Итак, я пытаюсь добиться отображения этого списка в меньших группах, поэтому в каждой группе будет 5 элементов в списке, а затем разделитель и еще 5 элементов, примерно так:

    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]

    Я запишу это под sapper и svelte, но также под html, css и js.

    Любая идея?


    • javascript html css svelte sapper
    person Marco    schedule 11.12.2019    source источник

    Ответы (2)


    arrow_upward
    3
    arrow_downward

    Вы можете разбить список на части, как предлагает Йошнусс. В качестве альтернативы вы можете добавить разделитель внутри цикла each для каждого пятого элемента:

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

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

    Демо здесь.

    person Rich Harris    schedule 12.12.2019
    comment
    Демо было всего лишь дополнительным шагом, которого я не ожидал. Спасибо. Я ценю это. - person Marco; 12.12.2019

    arrow_upward
    2
    arrow_downward

    Вам понадобится два уровня итерации.

    В теге сценария разделите сообщения на список списков:

    import chunk from 'lodash/chunk'

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

    А затем перебрать куски:

    {#each chunks as chunk, i}

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

   ======================
{/each}
    person joshnuss    schedule 11.12.2019
    comment
    Спасибо, сэр. Оно работает. Очень полезно. Ценить это. - person Marco; 12.12.2019