Issue with looping through an array using `{#each}` in Sveltekit, getting a "Cannot read properties of null" error.
5 replies
Last updated: Feb 15, 2023
E
Hello everybody,I’ve got a problem looping through an array using
TL;DR
displays the
works as well.
BUT - when I try to access the individual properties within
.
I’ll add more details in the thread.
{#each } in Sveltekit. Strangely it worked yesterday, I changed nothing that I’m aware of, and now it’s not working. Yay?TL;DR
{JSON.stringify(data.homepage.sections[2]._type, null, 2)}_typevalue as expected, and looping through the array with
{#each data.homepage.sections as item }
<section class="promo">
<pre>{JSON.stringify(item, null, 2)}</pre>
{item}
</section>
{/each}BUT - when I try to access the individual properties within
each, e.g.
{item._type} , I get this error message TypeError: Cannot read properties of null (reading '_type')
I’ll add more details in the thread.
Feb 15, 2023, 10:58 AM
E
The query for the page is
import { client } from '$lib/utils/_sanity';
export const load = async () => {
const homepage = await client.fetch(/* groq */ `
*[ _type == "homepage"][0]{
text,
ctaText,
ctaURL,
image,
sections[]->{
_type == 'award' => {
_type,
_id,
title,
quoteBlock,
quoteSigned,
ctaText,
ctaURL,
image
},
_type == 'designspirer' => {
_type,
_id,
title,
text[]{
...,
_type == "cta" => {
...,
"type": @ .link->_type,
"slug": @ .link->slug
}
},
image,
svg {
asset-> {
url
}
}
},
_type =='dsh' => {
_type,
_id,
title,
text,
callOut,
ctaText,
ctaURL,
image
},
_type =='retreat' => {
_type,
_id,
subheading,
titleLine1,
titleLine2,
link,
myTags[]->{
title
},
bgImage
},
_type =='shortcuts' => {
_type,
_id,
pages[]->{
_type,
_id,
name,
title,
slug {
current
}
}
},
_type =='sponsor' => {
_type,
_id,
title,
showSponsor
},
_type =='video' => {
_type,
_id,
title,
subheading,
text,
ctaText,
link->{
slug {
current
}
},
image
},
_type =='workshop' => {
_type,
_id,
title,
title2,
link,
text,
image
}
},
"sponsors": *[_type=="company" && sponsor==true]{
logo,
name
}
}
`);
return {
homepage,
};
}Feb 15, 2023, 10:59 AM
E
The query for the page:
Feb 15, 2023, 11:01 AM
E
The page template code:
Feb 15, 2023, 11:08 AM
E
This is the output in the browser from the first couple of objects in the array that I get from
So each component all have
JSON.stringify(item).
So each component all have
_idand
_type, but I can’t seem to access them at all. And this worked yesterday.
Feb 15, 2023, 11:16 AM
E
Two things that I did that made it work.1. Apparently the problem is that it was a
key-
valueobject(?), and I needed to use
Object.entriesto loop it.2. Filter away the objects with
nullvalue. I had one, and Svelte got stuck on it.Nr 2 I understand, but nr 1 is just pure luck and randomness from desperate searches.
{#each Object.entries(data.homepage.sections) as [i, section], index }
{#if section !== null }
{#if section._type === "award"}
<PromoAward />
{:else if section._type === "video"}
<PromoVideo />
{/if}
{/if}
{/each}Feb 15, 2023, 2:15 PM
Sanity– build remarkable experiences at scale
Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.