I'm creating a website for uploading images. You can create albums, and each album can contain a number of posts. There are numerous photos in each post (a array of images).
It looks like the following:
const albums = [
{
id: 1,
title: 'Album 1',
}
]
const posts = [
{
"album": 1,
"images": [
"https://picsum.photos/200/300",
"https://picsum.photos/200/300",
],
"author": 1,
},
{
"album": 1,
"images": [
"https://picsum.photos/200/300",
],
"author": 2,
},
{
"album": 1,
"images": [
"https://picsum.photos/200/300",
"https://picsum.photos/200/300",
"https://picsum.photos/200/300",
"https://picsum.photos/200/300",
"https://picsum.photos/200/300",
],
"author": 4,
}
]
For each post image in the array, I need to obtain a distinct index number. How I'm trying to obtain it in Svelte is as following:
{#each posts as post}
{#each post.images as image, index}
{index}: {image}
{/each}
{/each}
However, this won't give me an unique index for every image. It will result in the following:
0: https://picsum.photos/200/300
1: https://picsum.photos/200/300
0: https://picsum.photos/200/300
0: https://picsum.photos/200/300
1: https://picsum.photos/200/300
2: https://picsum.photos/200/300
3: https://picsum.photos/200/300
4: https://picsum.photos/200/300
Except, I need it like this:
0: https://picsum.photos/200/300
1: https://picsum.photos/200/300
2: https://picsum.photos/200/300
3: https://picsum.photos/200/300
4: https://picsum.photos/200/300
5: https://picsum.photos/200/300
6: https://picsum.photos/200/300
7: https://picsum.photos/200/300
How would I be possible to achieve the above one?
One thought of mine would be reducing/mapping the array and creating a post object for each single image. However, I'm unsure how to achieve this.
You can create a "getter" function to get all the images from every post
function getImages() {
return posts.map(post => post.images).flat()
}
And use that instead of two nested each loops
{#each getImages() as image, index}
{index}: {image}
{/each}
Generate a nested array containing the desired numbers:
<script>
// const posts = ...
$: numbers = buildNumbers(posts)
function buildNumbers(posts) {
let nr = 1
const result = []
posts.forEach((post, postIndex) => {
post.images.forEach((image, imageIndex) => {
result[postIndex] = result[postIndex] || []
result[postIndex][imageIndex] = nr
nr++
})
})
return result
}
</script>
<ul>
{#each posts as post, postIndex}
{#each post.images as image, imageIndex}
<li>{numbers[postIndex][imageIndex]}: {image}</li>
{/each}
{/each}
</ul>