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": [
            "/200/300",
            "/200/300",
        ],
        "author": 1,
    },
    {
        "album": 1,
        "images": [
            "/200/300",
        ],
        "author": 2,
    },
    {
        "album": 1,
        "images": [
            "/200/300",
            "/200/300",
            "/200/300",
            "/200/300",
            "/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: /200/300
1: /200/300
0: /200/300
0: /200/300
1: /200/300
2: /200/300
3: /200/300
4: /200/300

Except, I need it like this:

0: /200/300
1: /200/300
2: /200/300
3: /200/300
4: /200/300
5: /200/300
6: /200/300
7: /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.

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.

• javascript
• svelte
• sveltekit

• Please don't hate on me for posting this. - apols if misinterpreting, but please don't assume the worst in us, we want to help you fix issues in your code, we'd never hate anyone for asking for help :) – Can O'Spam feels disassociated Commented Jun 15, 2022 at 12:52
• (If you want to thank people, upvote answers and accept the one that was the most helpful to you.) – brunnerh Commented Jun 15, 2022 at 14:08
• @H.B. Sadly I can't upvote yet since I need at least 15 reputation to cast a vote. :[ – Wolf Commented Jun 16, 2022 at 14:01

3 Answers 3

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>

REPL

Why not use both indexes?

<script>
  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'],
      author: 4,
    },
  ];
</script>

<ul>
  {#each posts as post, index}
    {@const postIndex = index}
    {#each post.images as _, index}
      {@const imageIndex = index}
      {@const uniqueId = `${postIndex}:${imageIndex}`}
      <li>{uniqueId}</li>
    {/each}
  {/each}
</ul>

<!--
0:0
0:1
1:0
2:0
2:1
-->