Uncaught TypeError: items is undefined

[tahash]

Uncaught TypeError: items is undefined

[TahaSh]

@norricorp the paginate function expects to get an object with these three keys: items, pageSize, and currentPage. In your case, you're not specifying items in the object. So, to fix it, update paginatedItems to this:

$: paginatedItems = paginate({ items: articles, pageSize, currentPage })

[norricorp]

Hi @TahaSh, thanks for getting back so quickly
So I changed paginatedItems to

let items;
const [first, ...rest] = formattedArticles;
hero = first;
articles = rest;
}

onMount(fetchData);
$: paginatedItems = paginate({ items: articles, pageSize, currentPage })

In the browser console, I get
Uncaught TypeError: items is undefined
paginate paginate.js:2
update Home.svelte:39

line 39 in home.svelte is where paginatedItems is defined.

So then I changed "articles" to "items"

const [first, ...rest] = formattedArticles;
hero = first;
items = rest;

}

onMount(fetchData);
$: paginatedItems = paginate({ items, pageSize, currentPage })

</script>

{#if hero} {/if} {#if items}

{#each paginatedItems as article, index} {/each}

{/if}

And, once again, in console

Uncaught (in promise) TypeError: items is undefined
paginate paginate.js:2
update Home.svelte:39

Any other ideas? Obviously I am doing something very wrong.

[TahaSh]

@norricorp it's actually hard for me to tell without seeing the full code. But I think it's related to the code fetching the data. Also, please make sure you're using the latest version v0.1.0.

Feel free to send me a gist (or whatever you like) of the homepage full code and I'll take a look.

[norricorp]

https://gist.github.com/norricorp/011edb9f70280772f215797ee9203416

[TahaSh]

@norricorp it's erroring because articles is undefined initially, but paginate is expecting an array. So you can fix it by checking if articles is valid before calling paginate:

$: paginatedItems = articles && paginate({ items: articles, pageSize, currentPage })

Also, don't forget to add this check for <PaginationNav />:

{#if articles}
  <PaginationNav
    totalItems="{articles.length}"
    pageSize="{pageSize}"
    currentPage="{currentPage}"
    limit="{1}"
    showStepOptions="{true}"
    on:setPage="{(e) => currentPage = e.detail.page}"
  /> 
{/if}

Please let me know if you have any other questions :).

[norricorp]

Hi @TahaSh ,
that worked. Thank you so much for great support.
Are you intending to get this to version 1.0? What extra functionality do you plan? (I realise nothing to do with my issue - just interested)

[TahaSh]

Hi @norricorp, I'm really glad that it worked.

I have no plans for this package at the moment, but if you have anything in your mind for this package or even a new package, I would be more than happy to put it on my list. Thanks!